Is there a simple Javascript way to apply a single function to multiple element events?

Question

I want to associate one function with several events using pure Javascript.

In jQuery, I would use:

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

So using pure JS, I tried:

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

Which does not work because it getElementsByClassNamereturns an array, not a DOM object.

I can navigate through the array, but it seems too verbose and as if it is not needed:

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

Is there a standard way to accomplish this using pure Javascript?

Answer 1

You can add an event handler to the parent element, and then determine if one of the child elements with the desired class name is clicked:

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

or...

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

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

Answer 2

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

, ( ), wouldn " , ? DOM?

Answer 3

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

This (adapted example from MDN) is how you could do this without a traditional loop.