JS中事件委托的示例分析-创新互联

Click me

  Click me
  Click me
  
  Click me

  
    
      Click me
    

点击事件会触发多少个元素？毫无疑问，按钮本身会收到单击事件。而且所有按钮的祖先，甚至包括document 和window 对象也会收到。

点击事件的传播分三个阶段：

• 捕获阶段 —— 从window，document 和根元素开始，事件向下扩散至目标元素的祖先

• 目标阶段 —— 事件在用户单击的元素上触发

• 冒泡阶段——最后，事件冒泡通过目标元素的祖先，一直到根元素document 和window。

addEventListener 方法的第三个参数captureOrOptions：

element.addEventListener(eventType, handler[, captureOrOptions]);

使你可以捕获来自不同阶段的事件。

• 如果缺少captureOrOptions 参数，或者参数为false 或{capture：false}，那么侦听器将捕获目标（target）和 冒泡阶段（bubble phases）的事件

• 如果参数是true 或{capture：true}，那么侦听器将会侦听捕获阶段（capture phase）的事件。

通过下面的代码，你会侦听到在 元素上发生的捕获阶段的点击事件：

document.body.addEventListener('click', () => {
  console.log('Body click event in capture phase');
}, true);

在这个 Codesandbox 演示中，单击按钮时，你可以在控制台中查看事件的传播方式。

那么事件传播是怎样帮助捕获多个按钮事件的呢？

该算法很简单：把事件侦听器附加到按钮的父级，并在单击按钮时捕获冒泡事件。这就是事件委托的工作方式。

3.事件委托

让我们用事件委托来捕获多个按钮上的点击：

 
  Click me
  Click me
  
  Click me