Назначить onclick для всего класса

Question

Я пытаюсь подключить обработчик событий для всех элементов с определенным div. Я создал jsfiddle, показывающий пример моего кода. Может ли кто-нибудь указать мне в правильном направлении?

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

пожалуйста, не JQuery не отвечает

Благодарности

Answer 1

Имущество NodeList (то, что getElementByClassName())), которое вы хотите, это length (нижний регистр).

Чтобы передать ссылку на функцию, просто используйте ее имя; после этого не ставьте круглые скобки. В противном случае вы вызываете функцию, присваиваете или передаете ее возвращаемое значение.

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 2

Я предлагаю (если явно не нужно перебирать в обратном направлении):

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.

Проблемы с кодом:

// '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(); 
} 

Кстати, вы могли бы вместо того, чтобы связать события обработчик до ближайшего предка элемента, который охватывает все элементы, которые вы хотите, чтобы иметь эффект, когда они щелкнули (примечание: используйте ближайший предок, который существует в DOM во время привязки события, в этом случае это body, потому что нет других элементов упаковки, в большинстве случаев это будет, и самое ближайшее следует использовать, чтобы избежать событий, имеющих до пузырьков до верхнего уровня):

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 3

Вы можете позвонить Array.prototype.forEach по результатам 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

Если вы заинтересованы в использовании JQuery, вы можете написать на это много проще. Хотя это не обязательно, это может сэкономить вам много времени в будущем, когда вы пытаетесь сделать более сложные вещи. На базовом уровне:

function foo... 

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

Это позволит получить все элементы DOM с классом «пункта» и прикрепить Foo на событие щелчка. Если вам интересно, есть много документации и помощи при использовании jQuery.