对最近做的项目做个总结,结果发现自己的JS好弱!调侃一下,基本除了alert()其它什么也不会了,当然封装的框架(EasyUI等还是会使的)除外。知耻而后勇,抽了三天的时间重新学习了一下JavaScript和Jquery,虽不能说收获满满的,但是分享的东西还是有的,这篇先说Dom0模型。
为什么会说Dom0模型?因为它有问题!!!这里的问题是是相对的——可能不是我们想要的效果!
一)问题:冒泡机制:
在循环绑定事件的时候,子元素绑定事件,父元素也会响应对应的事件;
$(function(){
var all=$("*"); //获取页面所有元素,然后对每个元素绑定一个click事件
all.each(function(){
var rel=this;
this.οnclick=function(event){
var event=event?event:window.event;
var target=event.target?event.target:event.srcElement;
print("事件源"+target.id+"---"+target.tagName+",事件对象:"+this.id+"<br>");
//event.stopPropagation();//阻止冒泡机制的发生
}
})
function print(text){
$("#content").append(text)
}
})
</script>
二、问题:事件覆盖
后面的事件或者属性会覆盖掉前面的;下面的结果是只会响应最后一次定义的函数,
$(function(){
$("#child")[0].οnclick=function(){
print("abc")
}
$("#child")[0].οnclick=function(){
print("bcd")
}
$("#child")[0].οnclick=function(){
print("eft")
}
$("#child")[0].οnclick=function(){
print("gdg")
}
function print(text){
$("#content").append(text)
}
})
三)、事件捕获
在循环绑定的事件的时候,点击子元素,可以认为是先点击了最外层的父元素,然后是次级父元素,最后点击到了子元素,这就是事件捕获!但是DOM0不支持事件捕获!
四)、解决方法:
a)、事件冒泡,通过event.stopPropagation()的方法来阻止事件冒泡的发生!当然,任性的IE是通过window.event.cancelBubble = true;来阻止冒泡的
b)、事件覆盖,这个通过Jquery可以解决,但是其实质,还是一个闭包问题,后面说。
c)、事件捕获,Dom0中没有解决,在Dom2中提出了解决方案,顺带着连事件冒泡的问题也解决了。
Dom2的事件监听器addEventListener,三个参数:响应的事件名称,响应的函数,是冒泡还是捕获,false表示事件冒泡,true表示事件捕获。
事件捕获:
<p style="margin:0in;font-family:楷体;font-size:12.0pt">$(function(){</p><p style="margin:0in;margin-left:.375in;font-family:楷体;font-size:12.0pt">varall=$("*"); </p><p style="margin:0in;margin-left:.375in;font-family:楷体;font-size:12.0pt">all.each(function(){</p><p style="margin:0in;margin-left:.75in;font-family:楷体;font-size:12.0pt">varrel=this;</p><p style="margin:0in;margin-left:.75in;font-family:楷体;font-size:12.0pt">this.addEventListener("click",function(event){</p><p style="margin:0in;margin-left:1.125in;font-family:楷体;font-size:12.0pt">varevent=event?event:window.event;</p><p style="margin:0in;margin-left:1.125in;font-family:楷体;font-size:12.0pt">vartarget=event.target?event.target:event.srcElement;</p><p style="margin:0in;margin-left:1.125in;font-family:楷体;font-size:12.0pt"><span lang="zh-CN">print("事件捕获事件源</span><span lang="en-US">"+target.id+"---"+target.tagName+",事件对象:"+this.id+"<br>");</span></p><p style="margin:0in;margin-left:.75in;font-family:楷体;font-size:12.0pt">},<span style="color:red">true</span>)</p><p style="margin:0in;margin-left:.375in;font-family:楷体;font-size:12.0pt">})</p><p style="margin:0in;margin-left:.375in;font-family:Calibri;font-size:10.5pt"> </p><p style="margin:0in;margin-left:.375in;font-family:楷体;font-size:12.0pt">functionprint(text){</p><p style="margin:0in;margin-left:.75in;font-family:楷体;font-size:12.0pt">$("#content").append(text)</p><p style="margin:0in;margin-left:.375in;font-family:楷体;font-size:12.0pt">}</p><p style="margin:0in;font-family:楷体;font-size:12.0pt">})</p>
事件冒泡:
$(function(){
var all=$("*");
all.each(function(){
var rel=this;
this.addEventListener("click",function(event){
var event=event?event:window.event;
var target=event.target?event.target:event.srcElement;
print("事件捕获事件源"+target.id+"---"+target.tagName+",事件对象:"+this.id+"<br>");
},false)
})
function print(text){
$("#content").append(text)
}
})
后话:
为什么会写这篇博客?其实,我一直以为JavaScript和Jquery一样,Jquery只不过是JavaScript的再封装,但是不全是那么回事,对于Jquery的好多问题追溯源头,还是跑到了原生Js上面,然后各种问题,然后……当然,如果单纯了说问题,不用这么大费周章,其实是为了后面的Jquery准备的!顺便说一句,(Notepad++太牛了,简直就是文本编辑界的火狐!有兴趣的可以深入体验一下)