JavaScript中的事件传播分为三种:冒泡传播、捕获传播和目标传播。这三种传播方式决定了事件对应的触发顺序,同时也是我们进行事件冒泡和阻止冒泡的重要依据。
冒泡传播是最常见的事件传播方式,即从事件触发的元素开始,依次向父级元素冒泡传递,直至到达根节点。比如有一个嵌套在一个div中的button元素,点击button后,事件会先在button元素上触发,然后依次在div元素、body元素、html元素上触发,直至最后到达根节点window对象。
<div onclick="console.log('div')"> <button onclick="console.log('button')">点击</button></div>捕获传播是冒泡传播的逆序,即从根节点开始,沿着事件触发元素的祖先元素逐级向下传递,直至到达事件触发元素。比如有一个在body元素上注册的click事件,在点击button元素时,会先在html元素、body元素上触发,最后才到达button元素。
document.body.addEventListener('click', function(event) {console.log('body');}, true);目标传播是指事件首先在目标元素上触发,然后再按照冒泡或捕获的方式传播。比如在button元素上注册一个click事件,点击该按钮时,会先在该元素上触发click事件,然后再根据父元素的注册情况,决定继续冒泡还是捕获。
document.querySelector('button').addEventListener('click', function(event) {console.log('button');event.stopPropagation(); // 阻止事件冒泡}, false);事件传播是DOM事件机制的重要组成部分,不同的传播方式可以满足不同的需求。比如在处理事件冒泡的过程中,可以避免使用很多重复的代码,同时也可以根据传播的顺序做出不同的响应;而使用捕获传播则可以更加精确地捕获事件,避免触发不必要的事件。
上一篇:javascript中丨丨符号
下一篇:javascript中函数参数传递









