事件的三个阶段
事件对象.eventPhase属性可以查看事件触发时所处的阶段
- 事件捕获阶段 : 从外向内
- 事件目标阶段 : 最开始选择的那个
- 事件冒泡阶段 : 从里向外
为元素绑定事件
addEventListener(“没有on的事件类型”,事件处理函数,控制事件阶段的)
addEventListener中第三个参数是控制事件阶段的，相关介绍
https://blog.csdn.net/weixin_45525272/article/details/108142029
事件的阶段属性值:
通过e.eventPhase这个属性可以知道当前的事件是什么阶段你的
如果这个属性的值是:
1---->捕获阶段
2---->目标阶段
3---->冒泡
测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> #dv1 { width: 300px; height: 200px; background-color: red; } #dv2 { width: 250px; height: 150px; background-color: green; } #dv3 { width: 200px; height: 100px; background-color: blue; } </style> <script> </script> </head> <body> <div id="dv1"> <div id="dv2"> <div id="dv3"></div> </div> </div> <script src="common.js"></script> <script> //事件冒泡:是从里向外 //同时注册点击事件 var objs = [my$("dv3"), my$("dv2"), my$("dv1")]; //遍历注册事件 objs.forEach(function (ele) { //为每个元素绑定事件 ele.addEventListener("click", function (e) { console.log(this.id+"====>"+e.eventPhase); }, true); }); //该属性在事件参数对象中存在 </script> </body> </html>
一般默认都是冒泡阶段,很少用捕获阶段
冒泡阶段:从里向外
捕获阶段:从外向内
阻止事件冒泡的方式
window.event.cancelBubble=true; IE特有的（标准中已废弃）,谷歌支持,火狐不支持
（ window.event就是一个对象,是IE中的标准 ）
e.stopPropagation(); 谷歌和火狐支持
window.event和e都是事件参数对象,一个是IE的标准,一个是火狐的标准（ 事件参数e在IE8的浏览器中是不存在,此时用window.event来代替）
冒泡显示测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> #dv1{ width: 300px; height: 200px; background-color: red; } #dv2{ width: 250px; height: 150px; background-color: green; } #dv3{ width: 200px; height: 100px; background-color: blue; } </style> <script> //事件冒泡:多个元素嵌套,有层次关系,这些元素都注册了相同的事件,如果里面的元素的事件触发了,外面的元素的该事件自动的触发了. </script> </head> <body> <div id="dv1"> <div id="dv2"> <div id="dv3"></div> </div> </div> <script src="common.js"></script> <script> my$("dv1").onclick=function () { console.log(this.id); }; my$("dv2").onclick=function () { console.log(this.id); }; //事件处理参数对象 my$("dv3").onclick=function (e) { console.log(this.id); //阻止事件冒泡 //e.stopPropagation(); console.log(e); }; document.body.onclick=function () { console.log("你们这些标签触发事件我都冒泡"); }; </script> </body> </html>
