是否有一種純Javascript方法將一個函數應用於多個元素的事件？

Question

我想使用純Javascript將單個函數綁定到多個事件。

在jQuery中，我會用：

$('.className').click(function(e){ //do stuff }); 

因此，使用純JS我想：

document.getElementsByClassName('className').onclick = function(e){ //do stuff }; 

不工作，因爲getElementsByClassName返回一個數組，而不是一個DOM對象。

我可以通過數組循環，但這似乎過於冗長，就像它不應該是必要的：

var topBars = document.getElementsByClassName('className'); 
for(var i = 0; i < topBars.length; i++){ 
    topBars[i].onclick = function(e){ //do stuff }; 
} 

是否有使用純JavaScript來完成這個標準呢？

Answer 1

您可以在事件處理程序添加到父元素，然後確定是否與所需的類名兒童元素的一個點：

var parent = document.getElementById('parent'); 
parent.addEventListener('click', function (e) { 
    if ((' ' + e.target.className + ' ').indexOf(' item ') !== -1) { 
     // add logic here 
     console.log(e.target); 
    } 
}); 

Example Here

或...

var parent = document.getElementById('parent'); 
parent.addEventListener('click', function (e) { 
    Array.prototype.forEach.call(parent.querySelectorAll('.item'), function (el) { 
     if (el === e.target) { 
      // add logic here 
      console.log(e.target); 
     } 
    }); 
}); 

Example Here

---

上述代碼片段只有在您點擊具有指定類別的元素時纔會起作用。換句話說，如果你點擊給定元素的孩子，它將不起作用。要解決這一點，你可以使用以下命令：

var parent = document.getElementById('parent'); 
parent.addEventListener('click', function (e) { 
    var target = e.target; // Clicked element 
    while (target && target.parentNode !== parent) { 
     target = target.parentNode; // If the clicked element isn't a direct child 
     if (!target) { return; } // If element doesn't exist 
    } 
    if ((' ' + target.className + ' ').indexOf(' item ') !== -1){ 
     // add logic here 
     console.log(target); 
    } 
}); 

Alternative Example

var parent = document.getElementById('parent'); 

parent.addEventListener('click', function (e) { 
    var target = e.target; // Clicked element 
    while (target && target.parentNode !== parent) { 
     target = target.parentNode; // If the clicked element isn't a direct child 
     if (!target) { return; } // If element doesn't exist 
    } 
    Array.prototype.forEach.call(parent.querySelectorAll('.item'), function (el) { 
     if (el === target) { 
      // add logic here 
      console.log(target); 
     } 
    }); 
}); 

Example Here

Answer 2

var elems = document.querySelectorAll('.className'); 
var values = Array.prototype.map.call(elems, function(obj) { 
    return obj.onclick = function(e){ //do stuff }; 
}); 

這個（自MDN改編的例子）是你如何在沒有傳統循環的情況下做到這一點。

Answer 3

一劈，其中DOM使用原型繼承模型來實現（大多數瀏覽器，但不所有），您可以將一個迭代器添加到NodeList構造函數中：

if (NodeList && NodeList.prototype && !NodeList.prototype.forEach) { 
    NodeList.prototype.forEach = function(callback, thisArg) { 
    Array.prototype.forEach.call(this, callback, thisArg) 
    } 
} 

然後：

document.getElementsByClassName('item').forEach(function(el){ 
    el.addEventListener('click', someFn, false); 
}) 

或

document.querySelectorAll('.item').forEach(function(el){ 
    el.addEventListener('click', someFn, false); 
}) 

當然，你不應該這樣做在生產中在網絡上（don't mess with host objects和所有），但不會是好，如果它是確定？或者迭代器被添加到DOM列表和集合？