Question

For example we have Events in HTML like this:

<div onclick="bla(this)" class="gg">

How could we add an Event Listener/Handler to all the gg elements by not writing the onclick="bla(this)" thing in HTML?

I’ve tried something like this. But of course it does not work.

var ggs = document.getElementsByClassName('gg');
for (var i = 0; i < ggs.length; i++) {
// the 'this' below needs to go somewhere to become working
    ggs[i].addEventListener('click',bla,this); 
}

EDIT: The original code works http://jsfiddle.net/pVpaV/2/ . To make the code to work I need to put it at the end of the page.

Answer 1

If you need to keep using bla as it was originally, you’ll need to wrap it and pass the appropriate parameter:

var ggs,
    i;
ggs = document.getElementsByClassName('gg');
for (i = 0; i < ggs.length; i++) {
    ggs[i].addEventListener('click', function (e) {
        //in the event handler, `this` refers to the clicked element
        bla(this);
    }, false);
}

If you simply need to call bla in the context of the element that triggered the event, addEventListener already does that by default.

var ggs,
    i;
function bla(e) {
    //`e` is event data
    //`this` is the element that triggered the event
}
ggs = document.getElementsByClassName('gg');
for (i = 0; i < ggs.length; i++) {
    ggs[i].addEventListener('click', bla, false);
}