5

首先，我正在使用 Chrome 开发工具测试各种方法，但我不认为自己是当今现代浏览器中 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 倍）。

如果有另一种更好的方法，我很想听听。如果有人想对我的 3 种方法的任何优点/缺陷进行教育，我也会非常感激。

4

4 回答 4

8

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

对于附加事件，您只需花费一个事件处理程序，并且您可以从该事件处理程序提供无限数量的子对象。

在每个事件的运行时都会有轻微的性能下降（可能不明显），因为事件必须在事件处理程序看到它之前冒泡到父级，并且事件处理程序必须检查源对象是否是所需的目标对象或不。但是，安装单个事件处理程序比安装数千个单独的事件处理程序要高效得多。

委托事件处理还有一个优点，即它适用于动态创建的对象，甚至是在安装事件处理程序之后创建的对象——这对于直接安装在对象本身上的事件处理程序（非委托事件处理程序）来说并不适用.

在 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
});
于 2013-03-24T05:01:36.770 回答
2

查看“on”事件处理程序的委托版本，在此处描述 http://api.jquery.com/on/

在标题为“直接和委托事件”的部分中

于 2013-03-24T03:02:16.437 回答
0

为此，您应该使用jQuery 的 on() 方法。On 允许您将处理程序附加到高级 DOM 节点（例如文档）并在事件触发时依靠事件冒泡来执行处理程序。

$(document).on('click', [selector], [data], handler);
于 2013-03-24T03:01:28.097 回答
0

您可以在本机 js 中执行类似这样的简单操作。

<div id="test">
    <input type="button" value="Button 1"/>
    <input type="button" value="Button 2"/>
    <input type="button" value="Button 3"/>
</div>
<script>
    var parent = document.getElementById('test');
    parent.onclick = function(e){
        alert(e.target.value);
    };
</script>
于 2013-03-24T05:11:14.500 回答