将onclick分配给整个班级

Question

I'm trying to attach an event handler on all elements with a specific div. I have created a jsfiddle showing an example of my code. Could someone please point me in the right direction?

http://jsfiddle.net/nw4Xs/

var l = document.getElementsByClassName("item").Length;
var foo = function () { alert("foo"); };
for (var i = l - 1; i >= 0; i--) {
    document.getElementsByClassName("item")[i].onclick = foo();
}

please no jquery answers

Thanks

Answer 1

I'd suggest (unless you explicitly need to iterate in reverse):

var els = document.getElementsByClassName('item'),
    l = els.length,
    foo = function () { alert("foo"); };

for (var i = 0; i< l; i++) {
    els[i].onclick = foo;
}

JS Fiddle demo .

Problems with your code:

// 'Length' should be 'length':
var l = document.getElementsByClassName("item").Length;
var foo = function () { alert("foo"); };

// since you're not changing the class-name there's no need to
// go in reverse (it's just confusing to read):
for (var i = l - 1; i >= 0; i--) {
    // you're re-querying every iteration (plus when you're getting the length), why?
    // keeping the parentheses assigns the (non-existent) return value of the function,
    // instead of binding the function to the 'click' event:
    document.getElementsByClassName("item")[i].onclick = foo();
}

Incidentally, you could instead bind the event-handler to the closest ancestor element that wraps all the elements you want to have an effect when they're clicked (note: use the closest ancestor that exists in the DOM at the time of event-binding, in this case it's the body , because there's no other wrapping elements, in most cases there will be, and the closest should be used to avoid events having to bubble all the way to the 'top'):

var bindTarget = document.body, // use the closest wrapping element
    foo = function (e) {
        var e = e || window.event,
            clicked = e.target || e.srcElement;
        if (clicked.className.indexOf('item') > -1) {
            alert("foo");
        }
    };

bindTarget.onclick = foo;

JS Fiddle demo .

Answer 2

The property of a NodeList (what getElementByClassName() returns) that you want is length (lowercase).

To pass a reference to a function, just use its name; don't put parentheses after it. Otherwise you're calling the function and assigning or passing its return value.

var items = document.getElementsByClassName("item");
var l = items.length;
var foo = function () { alert("foo"); };
for (var i = l - 1; i >= 0; i--) {
    items[i].onclick = foo;
}

Answer 3

You can call Array.prototype.forEach over the result of document.getElementsByClassName("item")

var foo = function () { alert('foo'); };

Array.prototype.forEach.call(document.getElementsByClassName('item'), function ( item ) {
    item.addEventListener('click', foo);
});

Fiddle: http://jsfiddle.net/nw4Xs/7/

Answer 4

If you are interested in using jQuery, you can write this out a lot simpler. Whilst it's not necessary it may save you a lot of time in the future when you are trying to do harder stuff. At a basic level:

function foo...

$(".item").click(foo);

This will get all DOM elements with a class of "item" and attach foo to the click event. If you're interested, there is lots of documentation and help with using jQuery.