是否有一种纯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);
    }
});

这里的例子

要么...

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

这里的例子