Delegação de eventos JavaScript – Acervo Lima Tutorials

Resumo : neste tutorial, você aprenderá como usar a delegação de eventos JavaScript que adiciona um único manipulador de eventos ao elemento pai em vez de ter que registrar vários manipuladores de eventos nos elementos filhos.

Introdução à delegação de eventos JavaScript

Suponha que você tenha o seguinte menu:

<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>Linguagem de código:  HTML, XML  ( xml )

Para manipular o clickevento de cada item de menu, você pode adicionar os clickmanipuladores de eventos correspondentes:

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

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

let report = document.querySelector('#report');
report.addEventListener('click',(event) => {
    console.log('Report menu item was clicked');
});
Linguagem de código:  JavaScript  ( javascript )

Em JavaScript, se você tiver um grande número de manipuladores de eventos em uma página, esses manipuladores de eventos impactarão diretamente o desempenho pelos seguintes motivos:

Primeiro, cada manipulador de eventos é uma função que também é um objeto que ocupa memória. Quanto mais objetos na memória, mais lento será o desempenho.
Segundo, leva tempo para atribuir todos os manipuladores de eventos, o que causa um atraso na interatividade da página.

Para resolver esse problema, você pode aproveitar o evento borbulhando .

Em vez de ter vários manipuladores de eventos, você pode atribuir um único manipulador de eventos para tratar todos os clickeventos:

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;
    }
});Linguagem de código:  JavaScript  ( javascript )

Como funciona.

Quando você clica em qualquer <a>elemento dentro do <ul>elemento com o id menu, o clickevento borbulha para o elemento pai que é o <ul>elemento. Portanto, em vez de manipular o clickevento do <a>elemento individual, você pode capturar o clickevento no elemento pai.
No clickouvinte de eventos, você pode acessar a targetpropriedade que faz referência ao elemento que despacha o evento. Para obter o idelemento que o evento dispara, você usa a target.idpropriedade.
Depois de ter o idelemento que dispara o clickevento, você pode ter o código que trata o evento de forma correspondente.

A maneira como lidamos com o problema de muitos manipuladores de eventos é chamada de delegação de eventos .

A delegação de eventos refere-se à técnica de usar o evento bubbling para lidar com eventos em um nível mais alto no DOM do que o elemento no qual o evento foi originado.

Benefícios da delegação de eventos JavaScript

Quando for possível, você pode ter um único manipulador de eventos que documenttratará todos os eventos de um tipo específico. Ao fazer isso, você obtém os seguintes benefícios:

Menos uso de memória, melhor desempenho.
É necessário menos tempo para configurar manipuladores de eventos na página.
O documentobjeto está disponível imediatamente. Contanto que o elemento seja renderizado, ele pode começar a funcionar corretamente sem demora. Você não precisa esperar pelos eventos DOMContentLoadedou load.

Resumo

Ter um grande número de manipuladores de eventos ocupará memória e degradará o desempenho de uma página.
A técnica de delegação de eventos utiliza o evento bubbling para tratar o evento em um nível mais alto no DOM do que o elemento no qual o evento se originou.