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

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

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

---

这很好，但我有大约100个元素，所以我希望有一种比创建100个单独变量更简单的方法。我有一个更简单的方法来做这件事，我希望得到任何建议。：）

使用循环通常可以避免代码重复。在这种情况下，创建一个包含所有ID的列表（数组），并在其中循环：

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

---

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

---

有关传递javascript事件和拥有DOM树的方式的更多信息，请参阅

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

Mozilla不支持此功能-我在实践中看到过它，因此尽管它是一种优雅的解决方案，但在兼容性方面并不是最佳解决方案。@dudelgrincen-如果您使用Mootools或jQuery之类的抽象层来处理浏览器差异，它会支持。

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);