【前端面试】事件机制（事件冒泡，事件捕获，事件委托/事件代理）

事件机制

事件触发三阶段

• window 往事件触发处传播，遇到注册的捕获事件会触发
• 传播到事件触发处时触发注册的事件
• 从事件触发处往 window 传播，遇到注册的冒泡事件会触发

事件触发一般来说会按照上面的顺序进行，但是也有特例，如果给一个目标节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。

// 以下会先打印冒泡然后是捕获
node.addEventListener(
  'click',
  event => {
    console.log('冒泡')
  },
  false
)
node.addEventListener(
  'click',
  event => {
    console.log('捕获 ')
  },
  true
)

注册事件

element.addEventListener(event, function, useCapture)
//@event表示事件类型
//@function触发的回调函数
//@useCapture默认为false,表示事件句柄在冒泡阶段执行，若为true则在捕获阶段执行

其中第三个参数除了是布尔值，还可以是一个对象，对对象参数来说，可以使用以下几个属性：

- capture，布尔值，和 useCapture 作用一样
- once，布尔值，值为 true 表示该回调只会调用一次，调用后会移除监听
- passive，布尔值，表示永远不会调用 preventDefault

一般来说，我们只希望事件只触发在目标上，这时候可以使用 stopPropagation 来阻止事件的进一步传播。通常我们认为 stopPropagation 是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件。stopImmediatePropagation 同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件。

node.addEventListener(
  'click',
  event => {
    event.stopImmediatePropagation()
    console.log('冒泡')
  },
  false
)
// 点击 node 只会执行上面的函数，该函数不会执行
node.addEventListener(
  'click',
  event => {
    console.log('捕获 ')
  },
  true
)

事件代理

如果一个节点中的子节点是动态生成的，那么子节点需要注册事件的话应该注册在父节点上

<ul id="ul">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

<script>
  let ul = document.querySelector('##ul')
  ul.addEventListener('click', event => {
    console.log(event.target)
  })
  //给父节点注册了事件后，在事件冒泡阶段就会触发该事件，然后又可以根据event.target属性去操作与子节点相关的操作。
</script>

事件代理的方式相对于直接给目标注册事件来说，有以下优点

• 节省内存
• 不需要给子节点注销事件

另外不支持冒泡的事件有

• UI事件
  load
  unload
  scroll
  resize
• 焦点事件
  blur
  focus
• 鼠标事件
  mouseleave
  mouseenter