避免与将大量DOM对象绑定到click事件相关的内存或性能问题的最佳实践

Question

首先,我正在使用Chrome Dev Tools测试各种方法,但我不认为自己在今天的现代浏览器中使用JS是"专家"的,所以我正在寻找额外的反馈来赞美我的测试.

我有一个页面,通常有600多个元素需要处理点击事件.我可以想到至少3种不同的方法来解决这个问题,但我正在考虑页面大小,速度,JS内存问题,与对象计数相关的问题(在性能和稳定性方面).

1. 包括onClick ="foo(this);" 对于每个元素,并在我包含的.js文件中定义函数. - 更大的页面,函数定义一次,我认为JS的内存占用量更小,但整个页面的内存更大.
2. 使用jQuery和$(selector).click(foo(this)); - 较小的页面,函数定义一次,我认为JS的内存占用量更大,但整体页面更小.
3. 使用jQuery和$(selector).click(function(this){}); - 最小的页面,功能定义一次,但我希望这是内存方面最苛刻的(我担心我可能会遇到jQuery或JS作为一个整体的一些模糊的问题)但概念上最优雅.

我必须支持几乎所有可能期望jQuery运行的浏览器.项目数量可能会增加更多(可能是4或5倍).

如果有另一种方法会更好,我很乐意听到它.如果有人想教我三种方法的任何优点/缺陷,我也非常感激.

Answer 1

将大量类似元素绑定到单个事件的最有效方法是使用事件冒泡.将单个事件处理程序附加到公共父对象,然后在单个事件处理程序中,检查事件源自哪个对象,以查看原始对象是否是您正在监视此事件的对象.

对于附加事件,它只需要一个事件处理程序,您可以从该事件处理程序中提供无限数量的子对象.

在每个事件的运行时出现轻微的性能下降(可能不明显),因为事件必须在事件处理程序看到之前冒泡到父级,并且事件处理程序必须检查源对象是否是所需的目标对象或不.但是,安装单个事件处理程序而不是安装数千个单独的事件处理程序的效率要高得多.

委托事件处理还具有以下优点:它适用于动态创建的对象,甚至是在安装事件处理程序之后创建的对象 - 对于直接安装在对象本身上的事件处理程序(非委托事件处理程序)不能很好地工作.

在jQuery中,您可以使用委托事件处理,如下所示:

$(common parent selector).on('click', selector of target objects, function() {});

例如,HTML:

<div id="parent">
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
    <button class="addButton">Add</button>
</div>

码:

$("#parent").on('click', ".addButton", function(e) {
    // the value of `this` is set to the object that originated the event
    //     e.g. what was clicked on
});