Question

为了编写更好的代码并改进我使用jQuery的方式，我最近一直在做一些阅读。我学到的一个新技巧是使用jQuery进行事件委派。

在阅读时，我发现了两个＆＃34;假设＆＃34;解决它的不同方法。下面是代码片段来说明它们。

假设我有一个像这样的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（进一步操作）。
将课程切换为＆＃34;有效＆＃34;对于任何按钮。

而不是这样做：

$('#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
  }
});

或者这（方法2）

$('#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>

...然后仅＆＃34;官方＆＃34; jQuery事件委托实际上会检测所有孩子的点击事件。

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

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

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

1 个答案: