jQuery 中的事件委托 - 哪种方法更好？

Question

为了编写更好的代码并改进我的使用方式 jQuery，我最近一直在阅读一些东西。我学到的新技巧之一是使用 jQuery.

的事件委托

阅读时，我发现了两种 "supposed" 不同的解决方法。下面是说明它们的代码片段。

假设我有一个这样的 HTML 块：

<html>
  <head>
    <title>Test Code</title>
  </head>
  <body>
    <div id="switcher">
      <button id="button1">Button 1</button>
      <button id="button2">Button 1</button>
      <button id="button3">Button 2</button>
      <button id="button4">Button 3</button>
      <button id="button5">Button 4</button>
      <button id="button5">Button 5</button>
      <button id="button6">Button 6</button>
      <button id="button7">Button 7</button>
      <button id="button8">Button 8</button>
      <button id="button9">Button 9</button>
    </div>
<!-- rest of code here -->
  </body>
</html>

点击后，我想：

检索单击的按钮的 ID（用于进一步操作）。
将任意按钮的 class 切换为 "active"。

而不是这样做：

$('#switcher').find('button').click(function(){
  var $element = $(this);      
  var elementid = this.id;
  $element.toggleClass('clicked');
  //rest of code here
});

我可以这样做（方法 1）

$('#switcher').click(function(eventName){
  if ($(eventName.target).is('button')) {
    var $element =$(eventName.target);
    var elementid = eventName.target.id;
    $element.toggleClass('active');
    //rest of code here
  }
});

或者这个（方法二）

$('#switcher').on('click', 'button', function(){
  var $element = $(this);
  var elementid = this.id;
  $element.toggleClass('active');
  //rest of code here
});

这两个实际上都是委托技术吗？
如果是这样，这两种方法中哪一种更快（或性能更好）并且更好地处理委派？
有浏览器限制吗？

Answer 1

在您非常具体的情况下，当单击 button 元素（在所有浏览器上）时，这两种方法将提供完全相同的功能并且性能将相同（因为它是一个单击事件，它将是一个微小的差异，也很难以准确的方式进行测试。

您的特定结构是这样的：

<div id="switcher">
      <button id="button1">Button 1</button>
      <button id="button3">Button 2</button>
</div>

但是如果DOM结构发生变化，只有一点点：

<div id="switcher">       
    <button id="button1">
        <div class="inner">Button 1</div>
    </button>
    <button id="button3">
        <div class="inner">Button 2</div>
    </button>
</div>

...然后只有 "official" jQuery 事件委托将实际检测所有子项的点击事件。

如果您已经在您的页面中使用了 jQuery，那么修改事件侦听器来模拟事件委托是没有用的。除了编写更多代码之外，您不会获得任何优势。有人提到了性能：忘记它与点击事件。无用的优化至少和过早的优化一样糟糕，因为它浪费了你的时间并且降低了代码的可读性，但在这种情况下它甚至不会是优化（或者它只是一个需要认真证明的极客游戏）。

请注意，点击事件很少（或从不？）代表性能问题。它们只会偶尔发生一次。 RequestAnimationFrame、滚动或调整大小可能代表问题，而不是点击。单击事件可能是性能问题的唯一情况是，如果你有一个疯狂（非常极端！）复杂的 DOM 结构：但在那种情况下，它可能意味着你应该首先修复它。

jQuery 中的事件委托 - 哪种方法更好？

Event Delegation in jQuery - Which Method is Better?

javascript

jquery

performance

dom

event-delegation