Question

如果我有一个动态添加和删除html元素的程序，并且这些元素中的每一个都需要有一个事件监听器，那么有一种方法可以将事件监听器添加到一个比逐个执行更容易的变量中吗？我想使用一个数组，并让数组的每个索引都附加一个事件监听器，但这似乎不起作用。

var1 = document.getElementById('name');
var1.addEventListener("mousedown", doMouseDown, false);

这很好但我有大约100个元素所以我希望有一个比创建100个单独变量更简单的方法。我有一个更简单的方法来做到这一点我会喜欢任何建议。 :)

Answer 1

通常可以通过使用循环来避免代码重复。在这种情况下，创建所有ID的列表（数组），并循环遍历它：

var names = ['name1', 'name2', 'etc'];
for (var i=0; i<names.length; i++) {
    document.getElementById(name[i]).addEventListener("mousedown",
                                                             doMouseDown, false);
}

如果您的所有元素都没有后代，您还可以将一个事件绑定到公共父级，并检查event.target属性：

var names = '|name1|name2|';
document.addEventListener('mousedown', function(event) {
    // Use String.indexOf, because old IE browsers do not support Array.indexOf
    if (names.indexOf( '|' + event.target.id + '|') !== -1) doMouseDown(event);
}, false);

Answer 2

如果所有这些元素都是容器元素的子元素，则可以向父元素添加单个事件侦听器以捕获所有这些事件。

有关javascript事件传递方式和拥有DOM树的更多信息，请参阅http://www.quirksmode.org/js/events_order.html。

Answer 3

您可以通过为元素指定相同的名称来组织元素，然后使用 getElementsByName 将它们放入数组中。之后，您可以遍历数组并为每个元素添加侦听器。

在JavaScript中动态添加多个事件侦听器

3 个答案: