在事件委托方面,addEventListener与onClick

我正在学习事件是如何工作的,主要是addEventListener中的事件捕获和冒泡。这article对整体理解很有帮助。

捕获和冒泡定义父元素中事件发生的顺序。据我所知this is important是因为事件委托。并且addEventListener实际上并不为您委派事件,它只是搜索委派的事件,这样做正确吗?

除了事件委派之外,是否还有其他原因搜索DOM层次结构?

当我将DOM level 1 onclick事件附加到父元素并单击其子元素之一时,我仍然将子元素作为事件target。因此,我认为将事件侦听器附加到子元素,然后冒泡搜索委托元素是没有意义的。我一定是漏掉了什么..

如果手动维护委托事件,肯定不需要在DOM层次结构中向上搜索委托事件?


解决方案

addEventListener实际上并不为您委派事件,它只是搜索委派的事件,这样做正确吗?

不。它与事件委派完全无关,但可以用作事件委派的一部分。addEventListener方法将事件侦听器添加到DOM节点,当事件向上或向下传播到该元素时,该节点将响应。

事件委派是通过addEventListener向HTML标记容器添加事件处理程序以响应其中元素的冒泡事件的组合。

当我将DOM level 1 onclick事件附加到父元素并单击它的一个子元素时,我仍然将该子元素作为事件目标。因此,我认为将事件侦听器附加到子元素,然后冒泡搜索委托元素是没有意义的。这里一定有我遗漏的东西

事件委派有三个主要原因:

  1. 当您将元素动态添加到文档时,不需要记住将事件侦听器添加到元素
  2. 当从文档中删除元素时,您不需要记住从元素中删除事件侦听器。不记得这样做会导致浏览器中的内存泄漏
  3. 用于事件处理的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。

相关文章