在事件委托方面，addEventListener与onClick [英] addEventListener vs onclick with regards to event delegation
问题描述
我正在学习事件是如何工作的，主要是addEventListener中的事件捕获和冒泡。这article对整体理解很有帮助。
addEventListener实际上并不为您委派事件，它只是搜索委派的事件，这样做正确吗？
除了事件委派之外，是否还有其他原因搜索DOM层次结构？
当我将DOM level 1 onclick事件附加到父元素并单击其子元素之一时，我仍然将子元素作为事件target。因此，我认为将事件侦听器附加到子元素，然后冒泡搜索委托元素是没有意义的。我一定是漏掉了什么..
如果手动维护委托事件，肯定不需要在DOM层次结构中向上搜索委托事件？
推荐答案
和
addEventListener实际上并不为您委派事件，它只是搜索委派的事件，这样做正确吗？
不。它与事件委派完全无关，但可以用作事件委派的一部分。addEventListener方法将事件侦听器添加到DOM节点，当事件向上或向下传播到该元素时，该节点将响应。
事件委派是通过addEventListener向HTML标记容器添加事件处理程序以响应其中元素的冒泡事件的组合。
当我将
DOM level 1 onclick事件附加到父元素并单击它的一个子元素时，我仍然将该子元素作为事件目标。因此，我认为将事件侦听器附加到子元素，然后冒泡搜索委托元素是没有意义的。这里一定有我遗漏的东西
事件委派有三个主要原因：
- 当您将元素动态添加到文档时，不需要记住将事件侦听器添加到元素
- 当从文档中删除元素时，您不需要记住从元素中删除事件侦听器。不记得这样做会导致浏览器中的内存泄漏
- 用于事件处理的Java代码更少。更少的代码行意味着引入错误的更改更少，需要维护的代码也更少。
多尔说：
但我肯定应该通过将DOM级别1 onClick附加到元素父元素(如我所描述的)而不是元素来获得事件委托的好处，而不需要使用addEventListener或在元素父节点中搜索委托事件？
是否将处理程序附加到事件目标的父级并不重要。如果您希望执行一个响应用户事件的JavaScript函数，则需要使用addEventListener。这就是怎么做的。
addEventListener与onClick在委托事件时
这里真正的问题似乎是：
"在事件委派方面，使用addEventListener比使用onclick="someFunction()或element.onclick = function() {...}有什么好处。
以下StackOverflow问题提供有关addEventListener vs onclick的一般建议。
关于事件委托，实际上可以归结为。如果其他一些JavaScript代码需要响应单击事件，使用addEventListener可以确保双方都能响应。如果两个人都尝试使用onclick，那么其中一个会践踏另一个。如果你想在同一元素上点击一下，你俩都不能回应。此外，您希望尽可能地将行为与HTML分开，以防以后需要更改它。如果要更新50个HTML文件，而不是一个JavaScript文件，那就太糟糕了。
如果使用document.documentElement对象来附加事件处理程序，则不需要等待"DomReady"事件或页面加载事件来附加委托事件。document.documentElement表示<html>元素，当它开始在页面上执行时，即可用于JavaScript。
这篇关于在事件委托方面，addEventListener与onClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
