Событие делегата с JavaScript

Question

У меня есть список div, к которым я хочу добавить события "onmouseover". Я пытаюсь перебрать список элементов и переопределить функцию «onmouseover» следующим образом:

for (var i=0; i<3; i++) {
   elements[i].onmouseover = function() { alert('FOO') }; 
}

К сожалению, после завершения загрузки страницы, похоже, что это применяется только к самому последнему элементу. Я уверен, что это настоящий вопрос новичка, но я до сих пор не понял его ...

Вот лучший пример, демонстрирующий мою проблему: http://jsfiddle.net/qajPM/

Answer 1

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

HTML:

<div id="parent">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

Javascript:

document.getElementById('parent').onmouseover = function(e) {
    var target = e.target || e.currentTarget;
    alert('Target ' + target.innerHTML + ' was moused over');
};

Скрипка: http://jsfiddle.net/ZhpLA/

Как уже отмечали другие, jQuery также делает этот код немного меньше кода (хотя, если это все, что вам нужно, это будет бессмысленно):

$('#parent').on('mouseover', 'div', function(e) {
    alert('Target ' + e.currentTarget.innerHTML + ' was moused over');
});

Преимущество приведенного выше кода jQuery заключается в том, что он будет применяться как к текущему, так и к будущему дочернему div с #parent. Если вы добавите еще программно, событие mouseover продолжит работать и для них.

Answer 2

Проблема в том, что вы создаете все свои элементы div следующим образом:

parent.innerHTML += "<div> " + i + "</div>"

Как я уверен, вы знаете, что это эквивалентно parent.innerHTML = parent.innerHTML + ..., но свойство .innerHTML возвращает html в виде строки (без каких-либо уже связанных обработчиков событий), поэтому каждый раз, когда вы делаете это, оно перезаписывает весь innerHTML. parent div с новой строкой, что означает, что вы эффективно добавляете к текстовому содержимому, но забиваете обработчики mouseover, которые вы уже настроили.

Попробуйте вместо этого что-то вроде этого:

var el = document.createElement("div");
el.innerHTML = i;
parent.appendChild(el);

Который добавляет новый элемент, не затрагивая уже существующие.

Обновленная демоверсия: http://jsfiddle.net/qajPM/1/