我想使用纯 Javascript 将单个函数绑定(bind)到多个事件。
在 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 来完成此任务?
最佳答案
您可以将事件处理程序添加到父元素,然后确定是否单击了具有所需类名的子元素之一:
var parent = document.getElementById('parent');
parent.addEventListener('click', function (e) {
if ((' ' + e.target.className + ' ').indexOf(' item ') !== -1) {
// add logic here
console.log(e.target);
}
});
或者...
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);
}
});
});
只有当您单击具有指定类的元素时,以上代码片段才会起作用。换句话说,如果您单击该给定元素的子元素,它将不起作用。要解决此问题,您可以使用以下方法:
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);
}
});
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);
}
});
});
关于javascript - 是否有一种纯 Javascript 方法可以将一个函数应用于多个元素的事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27892905/