JavaScript事件委派比您想象的要容易

关键要点

• JavaScript事件代表团是一种通过减少所需事件处理程序数量来提高性能的技术。与其将单个事件处理程序附加到每个元素上，不如将单个事件处理程序添加到父元素中，从而为其所有子元素处理事件。
• 事件委托通过事件冒泡和目标元素来工作。当触发事件时，它也会激活所有元素的祖先，这一过程称为事件冒泡。目标元素（事件的原始元素）存储在事件对象的属性中，使您可以确定事件的起源。
• 事件委托会提高性能并减少记忆使用量，但并非所有事件都泡泡，并且处理某些鼠标事件可能会成为性能瓶颈。因此，仔细管理您的事件委托代码以避免这些潜在问题很重要。

如果您想在网页上添加一些JavaScript交互性，您可能听说过JavaScript事件委托，并认为这是仅硬核JavaScript程序员担心的那些复杂的设计模式之一。事实是，如果您已经知道如何添加JavaScript事件处理程序，那将是可以实现的快照。

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

它如何工作？

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

它将如何帮助我？

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

代码中的外观如何？

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

功能getEventTarget（e）{
  E = E || window.event;
  返回e.target || E.Srcelement;
}

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

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

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

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

什么是利弊？

JavaScript事件的好处是：

• 事件处理程序较少需要设置，并居住在内存中。这是大的；更好的性能和崩溃的效果较小。
• DOM更新后，无需重新使用处理程序。例如，如果您的页面内容是通过AJAX动态生成的，则无需在加载或卸载元素时添加和删除事件处理程序。

潜在的问题可能不太清楚，但是一旦您意识到它们很容易避免：

• 您的活动管理代码可能会成为性能瓶颈的风险，因此请尽可能保持倾斜。
• 并非所有事件都泡泡。模糊，焦点，负载和卸载事件不会像其他事件那样冒泡。实际上，可以使用捕获阶段（在IE以外的浏览器中）而不是冒泡阶段来访问模糊和焦点事件，但这是另一天的故事。
• 管理某些鼠标事件时需要谨慎。如果您的代码正在处理Mousemove事件，则您有很大的风险可能会创建性能瓶颈，因为Mousemove事件经常触发。 MouseOut事件具有古怪的行为，在事件委托中很难管理。

概括

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

事件代表团是在需要且易于实现的情况下使用的方便工具。

关于JavaScript事件代表团的常见问题

在JavaScript中使用事件委托的主要优点是什么？

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

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

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

可以在JavaScript中的任何事件中使用事件委托吗？

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

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

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

JavaScript中事件委托和事件绑定有什么区别？

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

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

是的，事件委托的主要好处之一是它可以与动态添加的元素一起使用。由于事件侦听器已连接到父元素，因此可以处理附加侦听器后添加到DOM的子元素的事件。

如何在JavaScript中使用“此”关键字的事件委托？

使用事件委托时，事件处理程序内部的“此”关键字是指随附事件侦听器的元素，而不是触发事件的元素。为了参考触发事件的元素，您可以使用事件对象的“目标”属性。

我可以将事件代表团与jQuery一起使用吗？

是的，jQuery提供了“ .on（）”方法，您可以用来实现事件委托。 “ .on（）”方法采用三个参数：事件类型，子元素的选择器和事件处理程序。

使用事件代表团的性能影响是什么？

事件代表团可以显着提高性能，尤其是在处理大量类似元素时。通过将单个事件侦听器附加到父元素上，您可以减少需要由浏览器管理的事件侦听器的数量，这可能会导致性能的明显改善。

我可以在JavaScript中使用事件委托与自定义事件吗？

是的，您可以在JavaScript中使用自定义事件的事件委托。就像内置的事件一样，自定义事件也可以在DOM树上冒出来，使您可以使用附加到父元素的单个事件侦听器来处理它们。

以上是JavaScript事件委派比您想象的要容易的详细内容。更多信息请关注PHP中文网其他相关文章！