Статьи / JavaScript

Как работает делегирование событий в JavaScript

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

Предположим, что у нас есть родительский UL элемент, с несколькими дочерними элементами:

<ul id="parent-list">
	<li id="post-1">Item 1</li>
	<li id="post-2">Item 2</li>
	<li id="post-3">Item 3</li>
	<li id="post-4">Item 4</li>
	<li id="post-5">Item 5</li>
	<li id="post-6">Item 6</li>
</ul>

И предположим также, что что-то должно случиться, когда происходит клик по одному из дочерних элементов. Вы можете добавить отдельные слушатели событий к каждому LI элементу индивидуально, но что если элементы LI должны динамически добавляться и удаляться из списка? Добавление и удаление слушателей событий превратиться в кошмар, особенно если добавляющий и удаляющий код находится в разных частях вашего приложения. Лучшим решением будет добавить слушатель события на родительский UL. Но если вы добавите слушатель на родительский элемент, то как вы узнаете на каком из элементов произошел клик?

Просто: когда событие всплывает к UL элементу, вы можете проверить свойство объекта события, под названием target, чтобы определить по какому элементу произошел клик.

// Получим элемент, добавим слушатель на клик...
document.getElementById("parent-list").addEventListener("click", function(e) {
	// e.target содержит ссылку на элемент который кликнули!
	// Если он был в списке
	if(e.target && e.target.nodeName == "LI") {
		// Элемент списка найден!  Выведем ID!
		console.log("List item ", e.target.id.replace("post-"), " was clicked!");
	}
});

Если клик произошел по LI делаем что-то, если нет, то просто игнорируем событие.