我正在学习事件的工作原理，主要是 addEventListener 中的事件捕获和冒泡。这article对整体理解很有帮助。
捕获和冒泡定义父元素中事件发生的顺序。据我了解this is important因为事件委托(delegate)。 addEventListener 实际上并没有为您委托(delegate)事件，它只是搜索委托(delegate)事件，对吗？
除了事件委托(delegate)之外，还有其他搜索 DOM 层次结构的原因吗？
当我将 DOM level 1 onclick 事件附加到父元素并单击其子元素之一时，我仍将子元素作为事件 target。所以我看不出将事件监听器附加到子元素然后冒泡搜索委托(delegate)元素的意义。一定有我在这里遗漏的东西..
当然，如果您手动维护委托(delegate)事件，就不需要遍历 DOM 层次结构来搜索委托(delegate)事件了吗？
最佳答案
And
addEventListenerdoesn’t actually delegate the events for you, it just searches for delegated events, is this correct?
没有。它对事件委托(delegate)绝对没有任何作用，但可以用作事件委托(delegate)的一部分。 addEventListener方法将事件监听器添加到 DOM 节点，当事件向上或向下传播到该元素时响应。
事件委托(delegate)是通过addEventListener 将事件处理程序添加到HTML 标记容器的组合。响应其中元素的冒泡事件。
When I attach a
DOM level 1 onclickevent to a parent element and click on one of its children, I still get the child element as the event target. So I don't see the point in attaching an event listener to a child element and then bubbling up to search for delegated elements. There must be something I'm missing here
事件委托(delegate)有以下三个主要原因:
- 在将元素动态添加到文档时，您无需记住为元素添加事件监听器
- 当元素从文档中移除时，您无需记住从元素中移除事件监听器。不记得这样做会导致浏览器内存泄漏
- 您最终使用更少的 JavaScript 代码来处理事件。更少的代码行意味着引入错误的更改更少，需要维护的代码也更少。
多尔说:
But surely I should get the benefits of event delegation by attaching a DOM level 1 onclick to an elements parent (like I described), rather than the element, without needing to use addEventListener or having to search through an elements parent nodes for delegated events?
您是否将处理程序附加到事件目标的父级是无关紧要的。如果你想执行一个 JavaScript 函数来响应用户事件，你需要使用 addEventListener .这就是它的完成方式。
委托(delegate)事件时的addEventListener vs onclick
这里真正的问题似乎是:
“在事件委托(delegate)方面，使用 addEventListener 比 onclick="someFunction() 或 element.onclick = function() {...} 有什么好处。
以下 StackOverflow 问题给出了关于 addEventListener vs onclick 的一般建议.
关于事件委托(delegate)，归根结底就是这个。如果其他一些 JavaScript 代码需要响应点击事件，使用 addEventListener 可以确保你们都可以响应它。如果你们都尝试使用 onclick ，然后一个踩另一个。如果你想在同一个元素上单击，你们都不能响应。此外，您希望尽可能将您的行为与 HTML 分开，以防您以后需要更改它。更新 50 个 HTML 文件而不是一个 JavaScript 文件会很糟糕。
如果您使用 document.documentElement对象附加事件处理程序，您不需要等待“domready”事件或页面加载事件来附加您的委托(delegate)事件。 document.documentElement , 代表 <html>元素，在它开始在页面上执行时就可用于 JavaScript。
关于javascript - 关于事件委托(delegate)的 addEventListener 与 onclick，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30035205/