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

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

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

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

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

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

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

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

实例:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div οnclick="firstClick()"> parent <div οnclick="secondClick()">child <div onclick = "thirdClick()">提交</div> </div> </div> <script> var divs=document.querySelectorAll("div");//获取所有的divs function firstClick(){ alert('firstClick') } function secondClick(){ alert('secondClick') } function thirdClick(){ alert('thirdClick') } function fn0(){ alert("box"); } function fn1(){ alert("child"); } function fn2(){ alert("but"); } divs[0].addEventListener("click",fn0,false); divs[1].addEventListener("click",fn1,false); divs[2].addEventListener("click",fn2,false); </script> </body> </html>

说明:

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

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

阻止冒泡:

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

阻止捕获:判断e.target

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

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具测试上述代码运行效果。

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/4d4cd8f06f8389c64c7c10ddcbc40d90.html