Bind event to multiple elements without looping (vanilla JS)

Question

I'm trying to achieve the equivalent of:

$('div').on('click', function() {
    // Do something
});

But without jQuery. My initial thought was to use a for loop to iterate over all elements in the set, but my guess is there's a better way of achieving this without using a loop (some native method?).

var elems = document.getElementsByTagName('div');

function someEvent() { // Generic function to test against
    alert('event fired');
}

for (var i=0, j = elems.length; i < j; i += 1) {
    elems[i].addEventListener("click", someEvent);
}

Is there a more elegant way of doing this without the inclusion of a library?

I think it's either that or binding the event to an parent element that contains all the desired elements (ex. body) and using the target property in the event. — JCOC611
– JCOC611, Commented Dec 14, 2013 at 5:29
You have to loop or delegate, but of course you can write your own wrapper function so that you don't have to repeat looping code all over your scripts every time you need to do this. Note that jQuery's .on() method loops internally. — nnnnnn
– nnnnnn, Commented Dec 14, 2013 at 5:35

Shea · Accepted Answer · 2013-12-14 05:52:02Z

What you want is event delegation. It works by binding a single event to a parent of multiple nodes, and analyzing the event's target node. For example, you can bind onmouseup to the body node, and when it is triggered from releasing the mouse on a div node, the body event object will contain that div in the target property. You can analyze the target to make sure it matches certain criterias.

A better way to explain this, is to just provide a working example.

document.body.onmouseup = function (event) {
    var target = event.target || event.toElement;

    if (target.nodeName.toLowerCase() == "div") {
       alert(target.childNodes[0].nodeValue);
    };
};

The main point of interest with this example is the target variable, and the condition to verify that our target is a div. The condition can even be a className or anything your heart desires.

Collectives™ on Stack Overflow

Bind event to multiple elements without looping (vanilla JS)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related