我的开源
js事件冒泡和事件捕获
1、事件冒泡
即由触发元素开始，依次触发上级元素的事件
2、事件捕获
即由最上层元素开始，依次向下直到触发本元素的事件
3、addEventListener 和 attachEvent
addEventListener(event,fn,useCapture)
useCapture:true -- 事件捕获；false--事件冒泡
attachEvent(event,fn) 默认事件冒泡方式触发
4、范例
<body id="bt"><span id="p1"> <div id="c1" style="width:100px;height:100px;border:1px solid #000;"> </div> </span><script>
var c1 = document.getElementById("c1");
var p1 = document.getElementById("p1");
var bt = document.getElementById("bt");
if(window.addEventListener){
c1.addEventListener("click",function(event){
alert(1.1);
},true)
p1.addEventListener("click",function(event){
alert(1.2);
},true)
bt.addEventListener("click",function(event){
alert(1.3);
},true)
}else{
c1.attachEvent("onclick",function(event){
alert(2.1);
})
p1.attachEvent("onclick",function(event){
alert(2.2);
})
bt.attachEvent("onclick",function(event){
alert(2.3);
})
}</script>
</body>
-在firefox中触发了addEventListener。依次结果，1.3,1.2,1.1;
修改useCapture为false. 依次结果，1.1,1.2,1.3;
-在不支持addEventListener的浏览器，如IE
触发attachEvent，依次结果，1.1,1.2,1.3;
标题：js事件冒泡和事件捕获
作者：hugh0524
地址：https://blog.uproject.cn/articles/2016/06/27/1467011442641.html
0 0