在事件委托方面,addEventListener与onClick
我正在学习事件是如何工作的,主要是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。
相关文章