首先我们先弄明白浏览器事件触发机制,分为三个阶段:
1. 事件捕获阶段:window 往事件触发处传播,遇到注册的捕获事件会触发 (addEventListener 的 true)
2. 事件目标处理函数:传播到事件触发处时触发注册的事件 (博主没搞懂这个阶段)
3. 事件冒泡阶段:从事件触发处往 window 传播,遇到注册的冒泡事件会触发(addEventListener 的 false 和 onclick、onmouseover...)
dom.addEventListener(‘click‘, function(ev) { // do something }, false) dom.addEventListener(‘click‘, function(ev) { // do something }, { useCapture: false, // 是否在捕获阶段触发 once: false, // 是否只触发一次,如果 true ,则触发后马上销毁 passive: false, // 如果是true,则调用 ev.preventDefault 会被忽略 })
事件触发顺序:
如果触发的 ev.target 直接是 dom 本身,那么执行顺序不按 useCapture 来,因为这些事件会同时触发,这个时候触发顺序是按注册顺序来。
如果触发的 ev.target 是 dom 的某个子节点,那么执行顺序按 useCaputrue 来,先 addEventlistener true,然后 onClick 和 addEventListener false 按注册顺序执行。
ev.stopPropagation 和 ev.stopImmediatePropagation
都是阻止捕获和冒泡阶段中当前事件的进一步传播。
唯一区别是 stopImmediatePropagation 阻止剩下的等效阶段的事件,而 stopPropagation 只会阻止往后阶段的时间传播
例如:
let div = document.querySelector(‘#logo‘) div.addEventListener( ‘click‘, ev => { console.log(‘div a‘) }, false ) div.onclick = function(ev) { console.log(‘div click‘) } div.addEventListener( ‘click‘, ev => { console.log(‘div b‘) // ev.stopPropagation() // ev.stopImmediatePropagation() }, true ) div.addEventListener( ‘click‘, ev => { console.log(‘div b2‘) }, true )
点击div的一个子元素:
1. 依次打印 div b、div b2、div a、div click
2. 取消注释 ev.stopPropagation(),依次打印 div b、div b2
2. 取消注释 ev.stopImmediatePropagation(),打印 div b
preventDefault()
方法,告诉浏览器,它默认的动作也不要做了。此事件还是继续传播(捕获、冒泡不会停)
原文地址:https://www.cnblogs.com/amiezhang/p/11407112.html