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

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