Здравствуйте!
Читаю
эту статью про делегирования событий. Я никак не могу понять в чем минус такого подхода:
//имеется таблица, при клике на ячейки которой ячейки должны сменить цвет
var selectedTd;
table.onclick = function(event) {
var target = event.target; // где был клик?
if (target.tagName != 'TD') return; // не на TD? тогда не интересует
highlight(target); // подсветить TD
};
function highlight(node) {
if (selectedTd) {
selectedTd.classList.remove('highlight');
}
selectedTd = node;
selectedTd.classList.add('highlight');
}
Автор объясняет это так:
Однако, у текущей версии кода есть недостаток.
Клик может быть не на том теге, который нас интересует, а внутри него.
В нашем случае, если взглянуть на HTML таблицы внимательно, видно, что ячейка содержит вложенные теги, например <strong>:
<td>
<strong>Northwest</strong>
...Metal..Silver..Elders...
</td>
И что дальше? Проверка
if (target.tagName != 'TD') return; справляется со своей задчей - игнорирует все, кроме td. Вообще непонятно зачем эта беготня по иерархии когда все в одну строчку делается.
Автор предлагает такое решение:
table.onclick = function(event) {
var target = event.target;
// цикл двигается вверх от target к родителям до table
while (target != table) {
if (target.tagName == 'TD') {
// нашли элемент, который нас интересует!
highlight(target);
return;
}
target = target.parentNode;
}
// возможна ситуация, когда клик был вне <td>
// если цикл дошёл до table и ничего не нашёл,
// то обработчик просто заканчивает работу
}
Заранее благодарю всех за ответ!
