JS的事件冒泡和事件捕获
程序员文章站
2022-05-06 08:01:25
...
JS在默认情况下冒泡执行事件,就开始从根元素开始捕获所有该事件的监听对象。我们可以通过绑定事件时,指定事件执行时在冒泡阶段还是捕获阶段。
obj.addEventListener(event,function(){},bool);
bool:false,代表冒泡阶段执行
bool:true,代表捕获阶段执行
Example:
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
</ul>
譬如有ul事件和li事件,点击li后
事件捕获
自上而下的去触发事件,先触发ul事件,再触发li事件
document.getElementById("parentId").addEventListener("click",function(e){
alert('****** Trigger parent event ******');
}, true);
事件冒泡
自下而上的去触发事件,先触发li事件,再触发ul事件
阻止事件冒泡
w3c的方法是e.stopPropagation(),IE则是使用e.cancelBubble = true;
<script type="text/javascript">
var obj1=document.getElementById('id1');
obj1.addEventListener('click',function(e){curClick('id1');stopPropagation(e)},false);
var obj2=document.getElementById('id2');
obj2.addEventListener('click',function(e){curClick('id2');stopPropagation(e)},true);
var obj3=document.getElementById('id3');
obj3.addEventListener('click',function(e){curClick('id3');stopPropagation(e)},true);
function curClick(id){
alert(id);
}
function stopPropagation(e){
var e = window.event || event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
</script>
当点击id3:执行结果:id2
当点击id2:执行结果:id2
当点击id1:执行结果:id1
通过这个例子发现,原来阻止了事件冒泡,也阻止了事件继续向下级捕获。
上一篇: 理解C#中的委托与事件
下一篇: JQuery的事件绑定与事件委托