关于事件委托,addEventListener vs onclick

时间:2015-05-04 16:35:41

标签: javascript javascript-events addeventlistener event-bubbling event-delegation

我正在学习事件如何工作,主要是addEventListener中的事件捕获和冒泡。这个article非常适合全面理解。

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

搜索DOM层次结构是否还有其他原因而不是事件委托?

当我将DOM level 1 onclick事件附加到父元素并单击其中一个子元素时,我仍然将子元素作为事件target。所以我没有看到将事件监听器附加到子元素然后冒泡以搜索委托元素的重点。我必须在这里找到一些东西..

当然,如果您手动维护委派的事件,则无需通过DOM层次结构搜索委派事件吗?

1 个答案:

答案 0 :(得分:3)

  

并且addEventListener实际上并没有为您委派事件,只是搜索委派事件,这是正确的吗?

没有。它对事件委托没有任何作用,但可以用作事件委派的一部分。 addEventListener方法向DOM节点添加一个事件侦听器,该节点在事件向该元素冒泡或向下传播时响应。

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

  

当我将DOM level 1 onclick事件附加到父元素并单击其中一个子元素时,我仍然将子元素作为事件目标。所以我没有看到将事件监听器附加到子元素然后冒泡以搜索委托元素的重点。我必须有一些我在这里失踪的东西

事件授权有三个主要原因:

  1. 当您将元素动态添加到文档时,您不需要记住向元素添加事件侦听器
  2. 当从文档中删除元素时,您不需要记住从元素中删除事件侦听器。不记得这样做会导致浏览器内存泄漏
  3. 最终会减少用于事件处理的JavaScript代码。更少的代码行意味着更少的引入错误和更少的代码来维护。
  4. 多尔说:

      

    但是我肯定应该通过将DOM级别1 onclick附加到元素父级(如我所描述的)而不是元素来获得事件委派的好处,而无需使用addEventListener或必须搜索元素父节点委托事件?

    是否将处理程序附加到事件目标的父级是无关紧要的。如果您希望执行JavaScript函数以响应用户事件,则需要使用addEventListener。这就是它的完成方式。

    在委派事件时,

    addEventListener vs onclick

    这里真正的问题似乎是:

    "在事件委派方面使用addEventListener优于onclick="someFunction()element.onclick = function() {...}有什么好处。

    以下StackOverflow问题提供了关于addEventListener vs onclick的一般建议。

    关于事件授权,它真的归结为此。如果某些其他JavaScript代码需要响应click事件,则使用addEventListener可确保您都可以响应它。如果你们都尝试使用onclick,那么就会踩到另一个。如果你想在同一元素上进行onclick,你们都无法做出回应。此外,您希望尽可能将您的行为与HTML分开,以备日后需要更改时使用。如果要更新50个HTML文件而不是一个JavaScript文件,那就太糟糕了。

    如果您使用document.documentElement对象附加事件处理程序,则不需要等待&#34; domready&#34;用于附加委派事件的事件或页面加载事件。表示document.documentElement元素的<html>在JavaScript开始在页面上执行时即可用于。