好资源导航 » 文章资讯 » js点击事件的执行过程实例分析【冒泡与捕获】

js点击事件的执行过程实例分析【冒泡与捕获】

2023-07-27 08:01:14 164

本文实例讲述了js点击事件的执行过程。分享给大家供大家参考，具体如下：

js事件对象event包括很多事件类型，这里用onclick事件为例，探讨一下在js事件捕获机制和冒泡机制下的执行过程，以及如何阻止事件的捕获和冒泡。

首先看下当我们点击一个元素后，浏览器的执行过程。

1，当某个元素绑定的事件被触发时，这时浏览器就会从顶级document元素发出一个事件流

2，这个事件流顺着dom层级，一层一层向下找，直到遇到了触发事件的目标元素，这个查找的过程是捕获阶段

说明：捕获阶段，在查找每一层dom时，遇到相同的事件默认不执行，元素的事件默认在冒泡阶段执行

3，到达目标元素后会触发目标元素绑定的事件函数，也就是目标元素事件函数处理阶段

4，在处理过目标元素事件后，在顺着dom层级一层一层向上查找，这时对应dom上如果有相同的事件，默认会被触发，冒泡阶段

实例：







Document




parent
child
提交

说明：

addEventListener有三个参数，最后一个参数是决定元素事件的触发阶段，默认是false，在冒泡阶段执行，设置为true,则在捕获阶段执行。

在dom上直接绑定的事件会在addEventListenter监听的事件执行之后执行。

阻止冒泡：

onclick=function(e){
e=e||window.event;
if(e.stopPropagation){
e.stopPropagation();//其它浏览器
}else{
e.cancelBubble=true;//IE浏览器
}
}

阻止捕获：判断e.target

functionfn0(e){
if(e.target==divs[0]){
alert("fn0");
}
}
divs[0].addEventListener("click",fn0,true);

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

js点击事件的执行过程实例分析【冒泡与捕获】

热门推荐

随机推荐