genbodev2
4/7/2017 - 12:44 PM

Delegate Задача: Над каждым ребенком нужно произвести какие-либо действия - Навешиваем событие на родителя - Проверяем что за элемент по

Delegate Задача: Над каждым ребенком нужно произвести какие-либо действия

  • Навешиваем событие на родителя
  • Проверяем что за элемент по которому кликнули (а берется вначале всегда самый глубокий)
  • Если это не тот элемент, то переходим "выше" к его parent
  • Если это тот элемент - выполняем действие

Таким образом не нужно навешивать события на каждого ребенка

// jQuery
$('table').delegate('td', 'click', highlight);

// JS
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 и ничего не нашёл,
  // то обработчик просто заканчивает работу
}