Question

我知道我们可以使用以下两种方法之一将事件绑定到元素：

// I know it won't work on dynamically created elements
$('.someElement').on('someEvent', function(){
    // Do some stuff.
});

或者我们也可以使用以下内容：

// It'd work on dynamically created elements
$('.someParent').on('someEvent', 'someElement' , function(){
    // Do some stuff.
});

现在我想问的是，这是一个好主意，如果我在我的整个应用中使用第二个？我的意思是，如果我们查看性能，第二个比第一个更好，因为它限制jquery只检查特定区域中的元素来绑定事件，不是吗？

Answer 1

来自DOC：

事件委托是指使用事件传播（冒泡）来处理DOM中更高级别的事件而不是事件源自的元素的过程。它允许我们为现在或将来存在的元素附加单个事件监听器。

因此，您可能需要使用多个事件监听器，那么您会做什么？显然是方法第一。

event-delegation-vs-direct-binding

使用$（）。on（，）来绑定事件会产生更少的CPU开销，因为你将绑定到单个＆＃34; root＆＃34;元素而不是可能更多的单个后代元素（每个绑定需要时间......）。

因此，您可以决定哪一点对性能更重要。添加新元素时是否有可用的CPU？如果是这样，那么直接绑定到新元素对于整体性能来说是最好的，但是如果添加元素是CPU密集型操作，您可能希望委托事件绑定并让事件触发从所有冒泡中创建一些额外的CPU开销。

Answer 2

使用委托事件的表现并不总是比直接附加事件更好。

考虑以下标记：

<div id="someId">   
    <div class="someParent">
      <div class="someElement"></div>
    </div>
    <div class="someParent">
      <div class="someElement"></div>
    </div>
    <div class="someParent">
      <div class="someElement"></div>
    </div>
</div>

如果您将处理程序附加到{{1>，那么将someParent委托给someElement处理器是没有意义的，因为您要附加相同数量的处理程序直接：

someElement

如果标记看起来像这样：

$('div.someParent').on('click', 'div.someElement', function() {
    // given the example markup, this would be slightly slower than
    // attaching the element directly $('div.someElement').on('click', ..
    // as you are attaching the same number of handlers, but have the overhead
    // of filtering for descendents with the class `div.someElement`
});

..并且您委托了上面的处理程序，您将附加3个处理程序，而不是15个（如果您直接附加处理程序），这将表现得更好。

在任何一种情况下，最好的方法是使用最近的父元素和<div id="someId"> <div class="someParent"> <div class="someElement"></div> <div class="someElement"></div> <div class="someElement"></div> <div class="someElement"></div> <div class="someElement"></div> </div> <div class="someParent"> <div class="someElement"></div> <div class="someElement"></div> <div class="someElement"></div> <div class="someElement"></div> <div class="someElement"></div> </div> <div class="someParent"> <div class="someElement"></div> <div class="someElement"></div> <div class="someElement"></div> <div class="someElement"></div> <div class="someElement"></div> </div> </div>，因此您只需附加一个处理程序：

id

委派处理程序（如您所知）的另一个好处是，它将被动态添加元素触发。

Have a look at this test on jsperf.com

Answer 3

参考this answered question，实际差异在于动态添加的元素，附加到父级的事件将可供新孩子使用。

这两个都有效。

前者适用于动态添加的元素。您使用文档是因为您要委托文档对象的子项上的事件，因此事件会冒泡到文档级别。选择最接近的父级也是比较方便的（父级必须在加载时存在于页面上）。

后者仍然有效，并且是将事件简单地绑定到特定元素的首选方法。

我个人不建议通过文档对象进行委派，而是建议在页面加载时使用最近的父对象。

事件绑定jquery的不同方式

3 个答案:

Have a look at this test on jsperf.com