JS中事件委托的示例分析

　　介绍

这篇文章主要介绍JS中事件委托的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

为什么要进行事件委托?

首先实现一个小功能:在单击HTML的按钮后,把消息输出到控制台。

为了实现这个小功能,你需要选择按钮,然后再用<代码> addEventListener() 方法来附加事件监听器:

& lt; button  id=癰uttonId"祝辞Click  me 　　 　　& lt; script> 　　,,. getelementbyid (& # 39; buttonId& # 39;) 　　,,,.addEventListener(& # 39;点击# 39;,,(),=祝辞,console.log(& # 39;点击! & # 39;)); 　　& lt;/script>

以上就是侦听单个元素(尤其是按钮)上事件的方式。

如果需要监听多个按钮上的事件呢?下面是一种可能的实现:

& lt; div  id=癰uttons"比; 　　& lt;才能button 类=癰uttonClass"祝辞Click  me 　　& lt;才能button 类=癰uttonClass"祝辞Click  me 　　& lt;才能!——,按钮…,——比; 　　& lt;才能button 类=癰uttonClass"祝辞Click  me 　　& lt;/div> 　　 　　& lt; script> 　　const 才能;buttons =, document.getElementsByClassName (& # 39; buttonClass& # 39;); 　　for 才能;(const  button  of 按钮),{ 　　,,,button.addEventListener(& # 39;点击# 39;,,(),=祝辞,console.log(& # 39;点击! & # 39;)); 　　,,} 　　& lt;/script>

你可以在Codesandbox上查看它是怎样工作的。

按钮列表被迭代为<代码> (const按钮的按钮)>

有没有更好的方法?

幸运的是,如果我们使用“事件委托”模式的话,侦听多个元素上的事件只需要一个事件侦听器。

事件委托使用<强>事件传播强机制的细节。想要要了解事件委托的工作原理,应该先了解什么是事件传播。

事件传播

当你单击下面html中的按钮时:

& lt; html> 　　& lt;才能body> 　　,,,& lt; div  id=癰uttons"比; 　　,,,,,& lt; button 类=癰uttonClass"祝辞Click  me 　　,,,& lt;/div> 　　& lt;才能/body> 　　& lt;/html>

点击事件会触发多少个元素?毫无疑问,按钮本身会收到单击事件。而且所有按钮的祖先,甚至包括文档<代码> 和对<代码>窗口象也会收到。

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

<李>

<强>捕获阶段——从<代码>窗口> 和<代码>根元素开始,事件向下扩散至目标元素的祖先

<李>

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

<李>

<强>冒泡阶段——最后,事件冒泡通过目标元素的祖先,一直到根元素文档<代码> 和<代码> 窗口。

JS中事件委托的示例分析

JS中事件委托的示例分析

<代码> addEventListener 方法的第三个参数<代码> captureOrOptions :

element.addEventListener (eventType,,处理程序(,captureOrOptions]);

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

<李>

如果缺少<代码> captureOrOptions> 假或<代码>{捕获:假}> 目标(目标)和冒泡阶段(泡沫阶段)的事件

<李>

如果参数是真正<代码> 或<代码>{捕获:真}> 捕获阶段(捕获阶段)的事件。

通过下面的代码,你会侦听到在<代码> & lt; body> 元素上发生的捕获阶段的点击事件:

document.body.addEventListener(& # 39;点击# 39;,,(),=祝辞,{ 　　console.log才能(& # 39;Body  click  event 拷贝capture 阶段# 39;); 　　},,真的);

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

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

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

3。事件委托

JS中事件委托的示例分析