事件触发机制

Posted 2022-08-23 amiezhang

首先我们先弄明白浏览器事件触发机制，分为三个阶段：

　　1. 事件捕获阶段：window 往事件触发处传播，遇到注册的捕获事件会触发 （addEventListener 的 true）

　　2. 事件目标处理函数：传播到事件触发处时触发注册的事件 (博主没搞懂这个阶段)

　　3. 事件冒泡阶段：从事件触发处往 window 传播，遇到注册的冒泡事件会触发（addEventListener 的 false 和 onclick、onmouseover...）

 

addEventListener

 

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

preventDefault()方法，告诉浏览器，它默认的动作也不要做了。此事件还是继续传播（捕获、冒泡不会停）