hugh 的个人博客

js事件冒泡和事件捕获

1、事件冒泡

即由触发元素开始,依次触发上级元素的事件

2、事件捕获

即由最上层元素开始,依次向下直到触发本元素的事件

3、addEventListener 和 attachEvent

addEventListener(event,fn,useCapture)

useCapture:true -- 事件捕获;false--事件冒泡

attachEvent(event,fn) 默认事件冒泡方式触发

4、范例

<body id="bt">
&lt;span  id="p1"&gt;
	&lt;div id="c1" style="width:100px;height:100px;border:1px solid #000;"&gt;
		
	&lt;/div&gt;
&lt;/span&gt;

<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