Question

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

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

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

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

我一直想知道在处理程序被触发时它是如何工作的，以及性能影响可能是什么。更具体地说，......

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

Answer 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可以帮助解决这个问题。

希望这有帮助！

关于课程的Javascript事件处理程序 - 它们的效率如何？

1 个答案: