在JavaScript中動態添加多個事件偵聽器

-1

如果我有一個程序正在動態添加和移除html元素，並且這些元素中的每一個都需要有一個事件偵聽器，有沒有辦法將事件偵聽器添加到變量中更容易比一個一個地去做？我想要使用一個數組，並讓數組的每個索引都有一個附加的事件監聽器，但這似乎不起作用。在JavaScript中動態添加多個事件偵聽器

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

這工作正常，但我有大約100個元素，所以我希望有一種比創建100個單獨變量更簡單的方法。我有一個更簡單的方法來做到這一點，我會愛任何建議。 :)

來源

2012-03-16 user1271792

代碼重複通常可以通過使用循環避免。在這種情況下，通過它創建所有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);

來源

2012-03-16 17:03:21

如果所有這些元素都是一個容器元素的孩子，你可以添加一個事件偵聽器的父元素來捕獲所有這些事件。

請參閱http://www.quirksmode.org/js/events_order.html瞭解JavaScript事件傳遞和擁有DOM樹的方式的更多信息。

來源

2012-03-16 17:08:14

Mozilla並不支持這一功能，因此雖然它是優雅的解決方案，但它在兼容性方面並不是最好的解決方案。 – 2012-03-16 17:14:15

@dudelgrincen - 如果您使用Mootools或jQuery這樣的抽象層來處理瀏覽器差異，它的確如此。 – 2012-03-16 17:19:18

您可以通過給他們相同的名稱來組織您的元素，然後使用getElementsByName將它們放入數組中。之後，您可以遍歷數組併爲每個元素添加偵聽器。

來源

2012-03-16 17:11:50

在JavaScript中動態添加多個事件偵聽器

回答

相關問題