事件机制

涉及面试题：事件的触发过程是怎么样的？知道什么是事件代理嘛？

事件触发三阶段

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

捕获阶段 事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上触发捕获事件，直到达到目标节点。

目标阶段 事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发

冒泡阶段 事件在目标节点上触发后，不会终止，一层层向上冒，回溯到根节点

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

  1. // 以下会先打印冒泡然后是捕获
  2. node.addEventListener(
  3.   'click',
  4.   event => {
  5.     console.log('冒泡')
  6.   },
  7.   false
  8. )
  9. node.addEventListener(
  10.   'click',
  11.   event => {
  12.     console.log('捕获 ')
  13.   },
  14.   true
  15. )

注册事件

通常我们使用 addEventListener注册事件，该函数的第三个参数可以是布尔值，也可以是对象。对于布尔值 useCapture 参数来说，该参数默认值为 false ，useCapture 决定了注册的事件是捕获事件还是冒泡事件。
对于对象参数来说，可以使用以下几个属性

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

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

  1. node.addEventListener(
  2.   'click',
  3.   event => {
  4.     event.stopImmediatePropagation()
  5.     console.log('冒泡')
  6.   },
  7.   false
  8. )
  9. // 点击 node 只会执行上面的函数，该函数不会执行
  10. node.addEventListener(
  11.   'click',
  12.   event => {
  13.     console.log('捕获 ')
  14.   },
  15.   true
  16. )

事件代理

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

  1. <ul id="ul">
  2.     <li>1</li>
  3.     <li>2</li>
  4.     <li>3</li>
  5.     <li>4</li>
  6.     <li>5</li>
  7. </ul>
  8. <script>
  9.     let ul = document.querySelector('#ul')
  10.     ul.addEventListener('click', (event) => {
  11.         console.log(event.target);
  12.     })
  13. </script>

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

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