Делегирование событий

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

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

Эта техника называется делегированием и очень активно применяется в современном JavaScript.

Пример «Ба Гуа»

Вот, например, диаграмма «Ба Гуа». Это таблица, отражающая древнюю китайскую философию.

Если кликнуть по ячейке, то она подсветится.

В таблице 9 ячеек. В каждой ячейке есть текст и тег STRONG для форматирования направлений: South, North etc. Этот пример в песочнице tutorial/browser/events/delegation/bagua/index.html.

В этом примере важно то, как реализована подсветка элементов.

Для этого используется делегирование событий. Вместо того, чтобы назначать обработчик для каждой ячейки, назначен один обработчик для всей таблицы. Он использует event.target, чтобы получить элемент, на котором произошло событие, и подсветить его.

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

  // ... подсветить ...
}

Клик может произойти на любом теге внутри таблицы. Например, на теге <STRONG>. А затем он всплывает наверх:

Для того, чтобы найти ячейку, нам нужно пройти цепочку parentNode:

table.onclick = function(event) {
  event = event || window.event;
  var target = event.target || event.srcElement;
  
  while(target != this) { // ( ** )
    if (target.tagName == 'TD') { // ( * )
       toggleHighlight(target);
    }
    target = target.parentNode;
  }
}

Этот код следует основному принципу делегирования:

1. В обработчике мы можем получить целевой элемент, на котором произошел клик. Он всегда самый вложенный, поэтому может быть как TD, так и STRONG внутри него. А еще клик может попасть в область между ячейками, если присутствует атрибут cellspacing. В этом случае целевым элементом будет TR или TABLE.
2. Поднимаемся вверх по цепочке родителей target = target.parentNode, пока не встретим TD или не дойдем до TABLE.
3. ( * ) Если мы TD - обрабатываем его.
   ( ** ) Если мы дошли вверх до текущего элемента (таблицы), значит клик каким-то образом попал вне TD, и нам он не интересен.

А теперь представьте себе, что в таблице не 9, а 1000 или 10.000 ячеек. Делегирование позволяет обойтись всего одним обработчиком для любого количества ячеек.

На примере меню

Делегирование событий позволяет удобно организовывать деревья и вложенные меню.

Давайте для начала обсудим одноуровневое меню:

<ul id="menu">
  <li><a class="button" href="/php">PHP</a></li>
  <li><a class="button" href="/html">HTML</a></li>
  <li><a class="button" href="/javascript">JavaScript</a></li>
  <li><a class="button" href="/flash">Flash</a></li>
</ul>

Данный пример - это просто семантичный HTML/CSS. Клики по меню будут обрабатываться с помощью JavaScript, но пункты меню представлены тегом A, чтобы обеспечить работоспособность меню для пользователей с отключенным JavaScript (и для поисковых систем).

Ссылки должны стать кликабельными, как в примере:

С помощью делегирования, мы можем назначить один обработчик для всего меню:

document.getElementById('menu').onclick = function(e) {
  var target = e && e.target || event.srcElement; // целевой элемент

  if (target.tagName != 'A') return; // если не ссылка - не интересует!
    
  var href = target.getAttribute('href');
  
  alert(href); // обработать клик по элементу

  return false; // отменить переход по ссылке
}

Здесь мы не поднимаемся от target вверх по цепочке parentNode, так как предполагаем, что у тега A в меню заведомо нет потомков.

Полный код примера: tutorial/browser/events/delegation/menu/index.html.

Пример со вложенным меню

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

У вложенного меню остается похожая семантичная структура:

<ul id="menu">
<li><a class="button" href="/php">PHP</a>
  <ul>
    <li><a href="/php/manual">Manual</a></li>
    <li><a href="/php/snippets">Snippets</a></li>
  </ul>
</li>
<li><a class="button" href="/html">HTML</a>
  <ul>
    <li><a href="/html/information">Information</a></li>
    <li><a href="/html/examples">Examples</a></li>
  </ul>
</li>
</ul>

С помощью CSS, можно спрятать вложенный тег UL до того момента, пока на LI не наведут курсор.

Для отображения вложенного меню достаточно составить правильный CSS. В принципе, скрытие-появление элементов можно реализовать и при помощи JavaScript, но если что-то можно сделать в CSS — лучше использовать CSS.

Полный код примера: tutorial/browser/events/delegation/menu-nested/index.html.

Меню может быть не только вложенным, но и динамическим. Можно добавлять новые пункты меню или удалять ненужные пункты. Так как применено делегирование, то обработчик подхватит новые элементы автоматически.

<style>
li { border: 1px solid green; }
</style>

<ul onclick="alert(event.target || event.srcElement)">
<li>Млекопетающие
  <ul>
    <li>Коровы</li>
    <li>Ослы</li>
    <li>Собаки</li>
    <li>Тигры</li>
  </ul>
</li>
</ul>

var treeUl = document.getElementsByTagName('ul')[0];

var treeLis = treeUl.getElementsByTagName('li');

for(var i=0; i<treeLis.length; i++) {
  var li = treeLis[i];
  
  var span = document.createElement('span');
  li.insertBefore(span, li.firstChild); // добавить пустой SPAN
  span.appendChild(span.nextSibling); // переместить в него заголовок
}

<style>
span { border: 1px solid red; }
</style>

<ul onclick="alert((event.target||event.srcElement).tagName)">
<li><span>Млекопетающие</span>
  <ul>
    <li><span>Коровы</span></li>
    <li><span>Ослы</span></li>
    <li><span>Собаки</span></li>
    <li><span>Тигры</span></li>
  </ul>
</li>
</ul>

var tree = document.getElementsByTagName('ul')[0];

tree.onclick = function(e) {
  e = e || event;
  var target = e.target || e.srcElement;
    
  if (target.tagName != 'SPAN') {    
    return; // клик был не на заголовке
  }
    
  var li = target.parentNode; // получить родительский LI

  // получить UL с потомками -- это первый UL внутри LI
  var node = li.getElementsByTagName('ul')[0];

  if (!node) return; // потомков нет -- ничего не надо делать

  // спрятать/показать
  node.style.display = node.style.display ? '' : 'none';
}

tree.onselectstart = tree.onmousedown = function() {
  return false; // делаем узлы невыделяемыми
}

var largeImg = document.getElementById('largeImg');

document.getElementById('thumbs').onclick = function(e) {
  e = e || window.event;
  var target = e.target || e.srcElement;

  while(target != this) {

    if (target.nodeName == 'A') {
      showThumbnail(target.href, target.title);
      return false;
    }

    target = target.parentNode;
  }

}

function showThumbnail(href, title) {
  largeImg.src = href;
  largeImg.alt = title;
}

var imgs = thumbs.getElementsByTagName('img');
for(var i=0; i<imgs.length; i++) {
  var url = imgs[i].parentNode.href;

*!*
  var img = document.createElement('img');  
  img.src = url;
*/!*
}

document.getElementById('contents').onclick = function(evt) {
    var evt = evt || event;
    var target = evt.target || evt.srcElement;

    function handleLink(href) {    
      var isLeaving = confirm('Уйти на '+href+'?');    
      if (!isLeaving) return false;
    }
    
    while(target != this) {
      if (target.nodeName == 'A') {
*!*
        return handleLink(target.getAttribute('href')); // (*)
*/!*
      }
      target = target.parentNode;
    }
  }

Применение делегирования: действия в разметке

Ячейки таблицы и пункты меню - это примеры обработки схожих элементов. Эти способы работают хорошо, потому что действия для потомков были одни и те же.

Но делегирование событий позволяет использовать обработчик для абсолютно разных действий.

Например, нам нужно сделать меню с разными кнопками: «Сохранить», «Загрузить», «Поиск» и т.д.

Первое, что приходит в голову - это найти каждую кнопку и назначить ей свой обработчик.

Но более изящно решить задачу можно путем добавления одного обработчика на всё меню. Все клики внутри меню попадут в обработчик.

Но как нам узнать, какую кнопку нажали и как обработать это событие? Эту задачу мы можем решить, добавив каждой кнопке нужный нам метод в специальный атрибут, который назовем data-action (можно придумать любое название, но data-* является валидным в HTML5):

<button *!*data-action="save"*/!*>Нажмите, чтобы Сохранить</button>

Обработчик считывает содержимое атрибута и выполняет метод. Взгляните на рабочий пример:

<div id="menu">
  <button data-action="save">Нажмите, чтобы Сохранить</button>
  <button data-action="load">Нажмите, чтобы Загрузить</button>
</div>

<script>
function Menu(elem) {
  this.save = function() { alert('сохраняю'); };
  this.load = function() { alert('загружаю'); };

  var self = this;

  elem.onclick = function(e) {
    var target = e && e.target || event.srcElement; // (*)
*!*
    var action = target.getAttribute('data-action');
    if (action) {
      self[action]();
    }
*/!*
  };
}

new Menu(document.getElementById('menu'));
</script>

Обратите внимание, как используется трюк с var self = this, чтобы сохранить ссылку на объект Menu. Иначе обработчик просто бы не смог вызвать методы Menu, потому что его собственный this ссылается на элемент.

Что в этом случае нам дает использование делегирования событий?

• Не нужно писать код, чтобы присвоить обработчик каждой кнопке. Меньше кода, меньше времени, потраченного на инициализацию.
• Структура HTML становится по-настоящему гибкой. Мы можем добавлять/удалять кнопки в любое время.
• Данный подход является семантичным. Мы можем использовать классы «action-save», «action-load» вместо data-action. Обработчик найдёт класс action-* и вызовет соответствующий метод. Это действительно очень удобно.

Качество кода в примере выше можно повысить, если поменять названия методов объекта с save, load на onClickSave, onClickLoad, так как это не просто методы, а методы-обработчики событий. И вызывать их, соответственно, как self["onClick"+...](). Это сделает смысл методов более понятным и упростит чтение и поддержку кода.

Вспомогательная функция delegate

Алгоритм делегирования можно вынести в отдельную функцию, которая будет искать ближайший элемент и вызывать на нём обработчик.

Подобные функции есть во многих фреймворках, но легко можно написать и свою.

delegate(container, eventName,  // элемент, событие
  function(elem) { ... }, // селектор
  function(e) { ... } // действие
);

delegate(table, 'click',  // элемент, событие
  function(elem) { return elem.tagName == 'TD'; }, // селектор
  function(e) { randomizeColor(this); } // изменить цвет TD
);

function delegate(elem, eventName, selectorFunc, handler) {
  elem['on'+eventName] = function(e) {

    var target = e && e.target || e.srcElement;

    while(target != this) {
      if (selectorFunc(target)) {
        return handler.call(target, e); // (*)
      }
      target = target.parentNode;
    }

  }
}

Итого

Делегирование событий — это здорово.

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

Алгоритм:

1. Вешаем обработчик на контейнер.
2. В обработчике: получаем event.target.
3. В обработчике: если необходимо, проходим вверх цепочку target.parentNode, пока не найдем нужный подходящий элемент (и обработаем его), или пока не упремся в контейнер (this).

Зачем использовать:

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

Обобщая преимущества:

• Упрощает инициализацию, экономит память.
• Упрощает изменения.
• Позволяет добавлять или удалять элементы, в том числе через innerHTML, без изменения обработчика.

Конечно, у делегирования событий есть свои ограничения.

• Во-первых, событие должно всплывать. Большинство событий всплывают, но не все.
• Во-вторых, теоретически, делегирование создает дополнительную нагрузку на браузер, ведь обработчик запускается, когда событие происходит в любом месте контейнера, в том числе на элементах, которые нам не интересны. Но обычно это не является проблемой, так как эти лишние расходы — небольшие.