事件传播
事件的传播
关于事件的传播网景公司和微软公司有不同的理解
微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,
然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。
网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的 祖先元素的事件,
然后在向内传播给后代元素
W3C综合了两个公司的方案,将事件传播分成了三个阶段
1.捕获阶段
在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
2.目标阶段
事件捕获到目标元素,捕获结束开始在目标元素上触发事件
3.冒泡阶段
事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件,如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true;一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false IE8及以下的浏览器中没有捕获阶段
#box1{
width:200px;
height: 200px;
background-color: #00FF00;
}
#box2{
width:100px;
height: 100px;
background-color: #0000FF;
}
#box3{
width:50px;
height: 50px;
background-color: #FF0000;
}
window.onload = function(){
var box1 = document.getElementById("box1")
var box2 = document.getElementById("box2")
var box3 = document.getElementById("box3")
bind(box1,"click",function(){
alert("box1")
})
bind(box2,"click",function(){
alert("box2")
})
bind(box3,"click",function(){
alert("box3")
})
function bind(el,event,callback){
if(el.addEventListener){
el.addEventListener(event,callback,true)
}else{
el.attachEvent("on"+event,function(){
callback.call(el)
})
}
}
}