JS事件的传播
给个例子,我们熟悉的冒泡:
<script type="text/javascript">
//绑定函数
function bind(obj, eventStr, callback) {
if(obj.addEventListener) {
//大部分浏览器
obj.addEventListener(eventStr, callback, false);
}else {
//IE8及以下
obj.attachEvent("on"+eventStr, function(){
callback().call(obj);
});
}
}
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");
})
}
</script>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
点击蓝色box3,顺序触发box3、box2、box1。
- 关于事件的传播网景公司和微软公司有不同的理解
-
微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元素上的事件,然后再向当前元素的祖先元素上传播,也就说事件应该在冒泡阶段执行。
-
网景公司认为事件应该是由外向内传播的,也就是当前事件触发时,应该先触发当前元素的最外层的祖先元素的事件,然后在向内传播给后代元素。
- W3C综合了两个公司的方案,将事件传播分成了三个阶段
-
捕获阶段
在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
-
目标阶段
事件捕获到目标元素,捕获结束开始在目标元素上触发事件
-
冒泡阶段
事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件,可以将addEventListener()的第三个参数设置为true,一般情况下我们不会希望在捕获阶段触发事件,所以这个参数一般都是false。IE8及以下的浏览器中没有捕获阶段。=