Olá, pessoal!
Tudo bem?
Gostaria de tirar uma dúvida.
Acabei de ler algumas referências sobre a delegação de eventos e suas vantagens, sendo uma delas a Delegação de Eventos, conforme exemplo a seguir:
Imagine que você tem uma lista de itens e quer alertar o conteúdo do item quando ele for clicado. Em vez de adicionar um ouvinte de evento a cada item da lista, você pode adicionar um único ouvinte ao elemento pai.
HTML:
<ul id="minhaLista">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
JavaScript:
document.getElementById('minhaLista').addEventListener('click', function(e) {
// Verifica se o clique veio de um <li>
if(e.target.tagName === 'LI') {
alert(e.target.textContent);
}
});
Neste exemplo, e.target é o elemento que foi realmente clicado. Se esse elemento for um (li)>, o código mostra um alerta com o texto desse item. Isso significa que, não importa quantos itens você adicione à sua lista, o ouvinte de eventos no elemento pai (ul) cuidará de todos eles.
Dúvida: No código JavaScript, ao invés de usar um seletor único para o elemento pai (ul), poderia escreve o código usando a alternativa abaixo visando manter a performance e as práticas de delegação de evento ou resultado seria o mesmo que atribuir um listener para cada elemento filho (li) do elemento pai (ul) ?
document.querySelectorAll('#minhaLista li').forEach( (li) => {
li.addEventListener('click', (e) => {
alert(e.target.textContent);
});
})
Obrigado pela atenção!
