Про обработчики событий
Всем привет!
Кто может пояснить такое поведение обработчиков: Данный пример работает если обработчик вешать на this... Если же this заменить на bod[i] то не работает, хотя в bod[i] по идее нормальный елемент и если вывести его в консоль то мы увидим, что у него присутствует свойство className... <style> .mini { width: 200px; height: 30px; } .maxi { width: 600px; height: 300px; } </style> <div class="zid"> <div class="mini"></div> <div class="mini"></div> <div class="mini"></div> </div> var bod = document.querySelectorAll(".mini"); for (var i = 0 ; i < bod.length; i++){ bod[i].addEventListener("mouseover", function() { this.className = "maxi"; }, false ); bod[i].addEventListener("mouseout", function() { this.className = "mini"; }, false ); } т.е. bod[i].addEventListener("mouseover", function() { bod[i].className = "maxi"; }, false ); не работает . |
pomidor_makaronus, когда цикл закончится i будет равно 3. А индекс элементов начинается с 0. Соответственно bod[3] - undefined.
И цикл тут не нужен, можно делегированием обойтись. |
Цитата:
pomidor_makaronus, когда ты присваиваешь обработчику "mouseover", то событие происходит не при присваивании, а позже и поэтому функция не знает ни объект "bod" ни переменную "i". Они лежат вне области видимости этой функции. При срабатывании события обработчик ссылается на объект, на котором он сработал и поэтому тут именно this надо применять. Вот, в учебнике, всё подробно об этом: Замыкания, область видимости |
Часовой пояс GMT +3, время: 13:39. |