Техника делегирования событий в JavaScript на примерах

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

Предположим, что у вас есть следующее меню:

<ul id="menu">
    <li><a id="home">home</a></li>
    <li><a id="dashboard">Dashboard</a></li>
    <li><a id="report">report</a></li>
</ul>

Для обработки события click каждого пункта меню вы можете добавить соответствующие обработчики событий click :

let home = document.querySelector('#home');
home.addEventListener('home',(event) => {
    console.log('Home menu item was clicked');
});

let dashboard = document.querySelector('#dashboard');
dashboard.addEventListener('dashboard',(event) => {
    console.log('Dashboard menu item was clicked');
});

let report = document.querySelector('#report');
report.addEventListener('report',(event) => {
    console.log('Report menu item was clicked');
});

В JavaScript, если у вас есть большое количество обработчиков событий на странице, эти обработчики событий будут напрямую влиять на производительность по следующим причинам:

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

Чтобы решить эту проблему, вы можете использовать всплывающую подсказку событий.

Вместо того, чтобы иметь несколько обработчиков событий, вы можете назначить один обработчик событий для обработки всех событий click :

let menu = document.querySelector('#menu');

menu.addEventListener('click',(event) => {
    let target = event.target;

    switch(target.id) {
        case 'home':
            console.log('Home menu item was clicked');
            break;
        case 'dashboard':
            console.log('Dashboard menu item was clicked');
            break;
        case 'report':
            console.log('Report menu item was clicked');
            break;
    }
});

Как это работает.

• Когда вы щелкаете по любому элементу <a> внутри элемента <ul> с помощью menu id , событие click перенаправляется к родительскому элементу, которым является элемент <ul>. Таким образом, вместо обработки события click отдельного элемента <a> вы можете зафиксировать событие click родительского элемента.
• В прослушивателе событий click вы можете получить доступ к target свойству, которое ссылается на элемент, который отправляет событие. Чтобы получить id элемента, который фактически вызывается событием, вы используете свойство target.id.
• Имея id элемента, запускающего событие click, вы можете иметь код, который соответствующим образом обрабатывает это событие.

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

Делегирование события относится к методу использования всплывающей цепочки событий для обработки событий на более высоком уровне в DOM, чем элемент, на котором возникло событие.

Преимущества

Когда это возможно, у вас может быть один обработчик событий в document, который будет обрабатывать все события определенного типа. Делая это, вы получаете следующие преимущества:

• Меньше использования памяти, выше производительность.
• Меньше времени требуется для настройки обработчиков событий на странице.
• Объект document доступен немедленно. Пока элемент визуализируется, он может начать работать правильно без промедления. Вам не нужно ждать DOMContentLoaded или событий load.

Заключение

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