事件冒泡、事件捕获、事件委派
事件流
在浏览器发展到第四代的时候,出现元素嵌套多层,ie提出事件冒泡,网警提出事件捕获
后期w3c整合了以上两种方式,默认为冒泡流
原理
1.一个完整的JS事件流是从windows开始,最后回到windows的一个过程
2.事件流被分为三个阶段(1-5)捕获阶段,(5-6)目标阶段,(6-10)冒泡阶段
上代码:默认冒泡
<body> <div id="a"> <div id="b"></div> </div> <script> let a = document.getElementById("a"); let b = document.getElementById("b"); a.onclick = (event) => { console.log("a"); } b.onclick = (event) => { console.log("b"); } document.onclick = (event) => { console.log("document"); } </script> <style> #a { width: 200px; height: 200px; background-color: red; } #b { width: 100px; height: 100px; background-color: pink; } </style> </body>
上代码:捕获阶段,稍微改动,b变成span元素了
<body> <div id="a"> <span id="b"></span> </div> <script> let a = document.getElementById("a"); let b = document.getElementById("b"); a.addEventListener("click", (e) => { console.log("a 捕获", e.target.nodeName, e.currentTarget.nodeName); }, true) //true捕获 false冒泡 b.addEventListener("click", (e) => { console.log("b 捕获", e.target.nodeName, e.currentTarget.nodeName); }, true) //true捕获 false冒泡 document.addEventListener("click", (e) => { console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName); }, true) //true捕获 false冒泡 </script> <style> #a { width: 200px; height: 200px; background-color: red; } #b { display: inline-block; width: 100px; height: 100px; background-color: pink; } </style> </body>
接下来的代码自己想象
<body> <div id="a"> <span id="b"></span> </div> <script> let a = document.getElementById("a"); let b = document.getElementById("b"); // 捕获 a.addEventListener("click", (e) => { console.log("a 捕获", e.target.nodeName, e.currentTarget.nodeName); }, true) //true捕获 false冒泡 b.addEventListener("click", (e) => { console.log("b 捕获", e.target.nodeName, e.currentTarget.nodeName); }, true) //true捕获 false冒泡 document.addEventListener("click", (e) => { console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName); }, true) //true捕获 false冒泡 // 冒泡 a.addEventListener("click", (e) => { console.log("a 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false) //true捕获 false冒泡 b.addEventListener("click", (e) => { console.log("b 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false) //true捕获 false冒泡 document.addEventListener("click", (e) => { console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName); }, false) //true捕获 false冒泡 </script> <style> #a { width: 200px; height: 200px; background-color: red; } #b { display: inline-block; width: 100px; height: 100px; background-color: pink; } </style> </body>
以上代码总结:
捕获阶段:首先window会获得捕获事件,之后往目标传递
目标阶段:真正点击的元素,如果写了捕获和冒泡事件会触发两次(捕获触发一次,冒泡触发一次)
冒泡阶段:从目标向window传递
特别说明:
e.target和e.currentTarget
target和currentTarget都是event上面的属性,target是真正发生事件的DOM元素,而currentTarget是当前事件发生在哪个DOM元素上
疑问:不使用addEventListener绑定的事件会发生在哪个阶段?
冒泡阶段
疑问:如果使用onclick那么它和addEventListener的执行优先级是什么?
如果触发的元素不是目标阶段那么谁先定义就谁先执行
疑问:如果事件在目标阶段是不受规则约束的,因为目标阶段不是捕获也不是冒泡
目标元素被点击,所有在目标元素上绑定的事件都会在目标阶段,在绑定捕获代码之前写了绑定的冒泡阶段的代码,所以在目标元素上就不会遵守先发生冒泡这一规则,而是先绑定的事件先发生【在目标元素上就不会遵循先发生捕获后发生冒泡这一规则,而是先绑定的事件先发生】
事件委派
性能问题:占用内存较大,必须先指定元素的事件处理程序,dom会被多次访问,影响页面交互就绪时间
动态绑定:动态增加的元素,事件无法绑定
事件委派到底选择使用冒泡还是捕获
理论上说,他们没有什么优劣之分,但是由于冒泡兼容低端浏览器,从兼容的角度来讲,推荐使用冒泡