JavaScript事件委派比您想象的要容易-js教程-PHP中文网

JavaScript事件委派比您想象的要容易 JavaScript事件委托是一种通过减少所需事件处理程序数量来提高性能的技术。与其将单个事件处理程序附加到每个元素上，而是将单个事件处理程序添加到父元素中，为其所有子元素处理事件。

事件委托通过事件冒泡和目标元素来工作。当触发事件时，它也会激活所有元素的祖先，这一过程称为事件冒泡。目标元素是事件的起源元素，存储在事件对象的属性中，使您可以确定事件的起源。

，事件授权提高性能并减少记忆使用情况，并非所有事件泡泡，并且处理某些鼠标事件可能会成为性能botterneck。因此，仔细管理您的活动委托代码以避免这些潜在问题很重要。

如果您要在网页上添加一些JavaScript互动性，您可能听说过JavaScript事件委托委托，并且认为这是那些累积的硬核设计模式之一。事实是，如果您已经知道如何添加JavaScript事件处理程序，那是实现的快照。

javaScript事件是网页上所有交互性的基础（我的意思是严重的交互性，而不是那些Dinky CSS下拉菜单）。在传统活动中，您可以根据需要从每个元素中添加或删除事件处理程序。但是，事件处理程序可能会导致内存泄漏和性能退化 - 您拥有的越多，风险就越大。 JavaScript事件委托是一种简单的技术，您可以通过该技术将单个事件处理程序添加到父元素中，以免将事件处理程序添加到多个子元素中。

它如何工作？

事件委托使用javascript事件的两个经常被忽略的javascript事件：事件泡泡和目标元素。当事件在元素上触发时，例如鼠标单击按钮，也会在该元素的所有祖先上触发同一事件。这个过程称为事件冒泡。事件从原始元素到达DOM树的顶部起泡。任何事件的目标元素是原始元素，我们的示例中的按钮，并存储在事件对象的属性中。使用事件授权，可以将事件处理程序添加到元素中，等待事件从子元素中弹起并轻松确定事件发起的元素。

它将如何帮助我？

想象一下，想象一下一个html表，带有10列和100行的html表，在哪个列表中，您希望在哪个列表上单击一个桌子单元格。例如，我曾经必须在单击时将大小可编辑的表的每个单元格制作。将事件处理程序添加到1000个单元格中的每个单元格中，这是一个主要的性能问题，并且可能是浏览器磨损内存泄漏的来源。取而代之的是，使用事件委托，您将仅在表元素中添加一个事件处理程序，拦截单击事件并确定单击哪个单元格。

代码中的外观是什么？

代码很简单；我们只需要担心检测目标元素即可。假设我们有一个带有ID“报告”的表元素，并且我们已将一个事件处理程序添加到了单击事件的表中，将调用Editcell函数。 Editcell函数将需要确定在表上冒泡的事件的目标元素。希望我们写一些需要此功能的事件处理程序函数，我们将其放置在一个称为getEventTarget的单独函数中：

函数geteventTarget（e）{e = e || window.event;返回e.target || E.Srcelement; }

登录后复制

变量e表示事件对象，我们只需要洒上跨浏览器代码即可访问并返回目标元素，该目标元素存储在Internet Explorer中的srcelement属性中，其他浏览器中的目标属性。

接下来是调用getEventTarget函数的编辑函数。一旦我们提到了目标元素，就可以确保该元素是我们期望的元素：

函数editcell（e）{var target = getEventTarget（e）; if（target.tagname.tolowercase（）==='td'）{//用单元}}}}}}

登录后复制

在editcell函数中进行一些操作，我们确认目标元素是通过选中其标签名称的表单元格。该检查可能过度简化；如果是事件的目标是表单元格中的另一个元素，该怎么办？快速修改添加代码以查找父型TD元素。如果某些单元不应该编辑怎么办？在这种情况下，我们可以在非编辑单元格中添加特定的类名称，并检查目标元素在使其可编辑之前是否具有该类名称值。许多选项可用，您只需要选择适合您应用程序的一个。

哪些优点和缺点是什么？

JavaScript事件委派的好处是：

较少的事件处理程序需要设置和居住在内存中。这是大的；
dom更新后，无需重新使用操作人员。 If your page content is generated dynamically, via Ajax for example, you don't need to add and remove event handlers as elements are loaded or unloaded.

The potential problems may be less clear, but once you are aware of them they're easily avoided:

There's a risk your event management code could become a performance bottleneck, so keep it as lean as possible.
Not all events 气泡。模糊，焦点，负载和卸载事件不会像其他事件那样冒泡。实际上，可以使用捕获阶段（在IE以外的浏览器中）而不是冒泡阶段访问模糊和焦点事件，但这是另一天的故事。
在管理某些鼠标事件时，您需要谨慎。如果您的代码正在处理Mousemove事件，则您有很大的风险可能会创建性能瓶颈，因为Mousemove事件经常触发。 Mouseout事件具有一个古怪的行为，很难通过事件委托进行管理。

摘要

有JavaScript事件委托示例可用：使用主要库：jQuery，Prototype和Yahoo！ UI。您还可以完全没有库找到示例，例如从可用类型的博客中找到的示例。

事件委托是一种方便的工具，可以在您的套件中使用并且易于实现。

关于JavaScript事件委托

经常询问的问题

在JavaScript中使用事件委托的主要优点是什么？使用事件委托的主要优点是，它通过减少元素附加的事件侦听器的数量来大大提高性能。您没有将单个事件侦听器附加到每个元素上，而是将单个事件侦听器附加到父元素。然后，该听众处理所有子元素的事件。当处理大量类似元素（例如列表项或表行）时，这特别有益。

事件委托在JavaScript中如何工作？

事件委托通过利用JavaScript中的事件过程来工作。当事件发生在子元素上时，它会通过DOM树冒泡，在其每个父元素上触发相同的事件。通过将事件侦听器附加到父元素上，您可以处理其所有子元素的事件。事件对象传递给事件处理程序包含“目标”属性，该属性指的是触发事件的实际元素。您可以使用此属性来确定如何处理事件。

可以与JavaScript中的任何事件一起使用事件委托？

是的，可以与JavaScript中的任何事件一起使用事件委托。但是，并非所有事件都泡泡。例如，“焦点”和“模糊”事件并不是所有浏览器中的气泡。对于这些事件，您可以使用“焦点”和“焦点”事件，哪些事件会发生。

如何停止在JavaScript中冒泡事件？

您可以通过使用事件对象的“ stoppropagagation”方法停止在Javascript中停止在JavaScript中冒泡事件。此方法可防止事件冒泡DOM树。但是，在使用此方法时要小心，因为它可以防止其他事件处理程序被触发。

在JavaScript中，事件委托和事件绑定之间有什么区别？

javaScript中的事件绑定在JavaScript中涉及将事件侦听器直接连接到元素。此听众只能处理此特定元素的事件。另一方面，事件委托涉及将事件听众附加到父元素上，该元素处理所有子元素的事件。该技术更有效，尤其是在处理大量类似元素时。

我可以使用带有动态添加元素的事件委托吗？

是的，事件委托的主要好处之一是它可以与动态添加的元素一起使用。 Since the event listener is attached to a parent element, it can handle events for child elements that are added to the DOM after the listener is attached.

How can I use event delegation with the 'this' keyword in JavaScript?

When using event delegation, the 'this' keyword inside the event handler refers to the element to which the event listener is attached, not the element that triggered the event.为了参考触发事件的元素，您可以使用事件对象的“目标”属性。