1

我曾经在通过 AJAX 创建给定类的每个元素时为其分配一个单独的事件处理程序，如下所示：

$('#newId').on('click', function (e) {...

我已更改为适用于所有元素的类的一个处理程序，如下所示：

$('#container').on('click', '.myClass', function (e) {...

我一直想知道当处理程序被触发时这到底是如何工作的，以及性能影响可能是什么。进一步来说，...

元素究竟是如何找到类处理程序的？这比每个元素一个处理程序慢吗？该类真的只有一个事件处理程序，还是以某种方式为类中的每个元素复制它？

4

1 回答 1

1

正如评论中提到的，每种方法都有优点和缺点。

当您有一个带有子元素来来去去的容器时，事件委托通常很好。想象一个带有编辑/删除按钮的大型无序列表。单击删除按钮时，您很可能会删除它的父 li。如果没有事件委托，您将负责解除绑定在这些元素上的任何事件处理程序的绑定。

事件委托使用 DOM 的事件冒泡属性。当 #container 的子级上触发 click 事件时，该事件将在节点树中冒泡，一路搜索事件的处理程序。然后测试事件目标以查看它是否与选择器匹配。如果是这样，则调用绑定的单击处理程序。如果没有 jQuery，这可能看起来像......

function myclass_click_handler() {
    // an element with myClass has been called
}

document.getElementById('container').addEventListener('click', function(e) {
    if (e.target.className.indexOf('myClass') > -1) {
        myclass_click_handler();
    }
});

事件委托的缺点之一是它不适用于所有事件。从性能的角度来看，它实际上可以提高性能，因为内存泄漏的机会更少。

当基于类直接为元素分配回调时，每个元素都会获得对回调函数的引用。如果您需要随后删除任意数量的这些元素，则需要取消绑定这些元素的事件处理程序。当您使用 remove() 方法时，jQuery 通过删除绑定的事件处理程序来帮助解决这个问题。

希望这可以帮助！

于 2012-06-09T02:29:40.460 回答