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 click
evento de cada item de menu, você pode adicionar os click
manipuladores 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 click
eventos:
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 idmenu
, oclick
evento borbulha para o elemento pai que é o<ul>
elemento. Portanto, em vez de manipular oclick
evento do<a>
elemento individual, você pode capturar oclick
evento no elemento pai. - No
click
ouvinte de eventos, você pode acessar atarget
propriedade que faz referência ao elemento que despacha o evento. Para obter oid
elemento que o evento dispara, você usa atarget.id
propriedade. - Depois de ter o
id
elemento que dispara oclick
evento, 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 document
tratará 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
document
objeto 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 eventosDOMContentLoaded
ouload
.
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.