Одной из важных функций Javascript является обработка событий, позволяющая пользователю взаимодействовать с веб-страницами. По мере того как веб-приложения становятся все более сложными, обработка событий может стать изматывающей. Именно здесь делегирование событий вступает в игру как метод оптимизации обработки событий. В этой статье мы рассмотрим концепцию делегирования событий, ее преимущества и способы ее реализации в вашем коде.
Делегирование событий — это просто метод обработки событий нескольких элементов с помощью одного прослушивателя событий. Вместо того, чтобы добавлять прослушиватель событий к каждому элементу, прослушиватель событий добавляется к родительскому элементу, который прослушивает события, инициированные дочерним элементом.
Давайте рассмотрим пример с делегированием событий и без него.
<div class=”buttons”> <button class=”button_sub”>Subtract</button> <button class=”button_reset”>Reset</button> <button class=”button_add”>Add</button> </div>
Вы можете добавить необходимые обработчики событий click для каждой кнопки для обработки события click:
let addButton = document.querySelector(.button_add)
addButton.addEventListener(‘click’, () => {
console.log(‘Add button was clicked’)
})
let subtractButton = document.querySelector(.button_sub)
addButton.addEventListener(‘click’, () => {
console.log(‘Subtract button was clicked’)
})
let resetButton = document.querySelector(.button_reset)
addButton.addEventListener(‘click’, () => {
console.log(‘Reset button was clicked’)
})
Наличие множества обработчиков событий на странице может отрицательно сказаться на приложении, в том числе:
* Каждый прослушиватель событий — это функция, которая также является объектом, занимающим память, а наличие слишком большого количества объектов в памяти может привести к к увеличению использования памяти, что, в свою очередь, может снизить производительность приложения.
* Может усложнить управление кодом и его отладку.
с делегированием событий
buttons.addEventListener(“click”, (event) => {
if (event.target.classList.contains(‘button_add’)) {
console.log(‘Add button was clicked’)
}
if (event.target.classList.contains(‘button_sub’)) {
console.log(‘Subtract button was clicked’)
}
if (event.target.classList.contains(‘button_reset’)) {
console.log(‘Reset button was clicked’)
}
})
Свойство target объекта event содержит информацию о фактическом элементе, получающем событие. В event.target.classList.contains мы проверяем, присутствует ли определенный класс CSS в элементе HTML, вызвавшем событие.
Когда вы нажимаете button, событие всплывает до div (родительский элемент), который обрабатывает событие.
Преимущества делегирования событий
* Вы можете писать более чистый код и создавать меньше прослушивателей событий с аналогичной логикой.
* Меньше памяти, выше производительность.
Заключение
Подводя итог, делегирование событий — это эффективный метод, который может значительно повысить производительность ваших веб-приложений. Хотя это может потребовать некоторых первоначальных усилий для настройки, преимущества могут быть существенными в долгосрочной перспективе, особенно для сложных веб-приложений.
