Если есть множество элементов, которые должны схоже реагировать на одно и то же событие, нет необходимости вешать обработчик на каждый элемент. Вместо этого единый обработчик размещается в контейнере, который содержит все эти элементы. Он ловит события на стадии всплытия и определяет конкретный объект события, чтобы произвести с ним необходимые действия.

var target = event.target

Конечно, необходимо проверять, тот ли это элемент, который нас интересует. Удобно делать это по имени тега.

if (target.tagName != 'TD') return;

Это условие проверяет, произошло ли событие на ячейке таблицы.

Интересующий нас целевой элемент может сам быть контейнером для других элементов. В этом случае целевым объектом события будут именно эти вложенные элементы. Но нам необходимо отследить это событие, ведь оно произошло в границах нужного элемента.
Для решения этой задачи ищется ближайший по иерархии к event.target элемент, удовлетворяющий заданному условию (селектору).

table.onclick = function(event) {
  var target = event.target;

  var td = target.closest('td');
  if (!td) return; 



  if (!table.contains(td)) return;


  highlight(td);
}



table.onclick = function(event) {
  var target = event.target;


  while (target != table) {
    if (target.tagName == 'TD') {

      highlight(target);
      return;
    }
    target = target.parentNode;
  }




}

0 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован