Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Event Delegation - Definição

Delegar ao contêiner inteiro a responsabilidade de atribuir as funções aos elementos. Estaria correta esta afirmação? não sei se eu entendi corretamente o conceito

3 respostas
solução!

Fala aí João, tudo bem? Realmente, a explicação não está muito boa, vou tentar ajudar:

Event Delegation: Imagine que temos em nossa página, o seguinte HTML:

<ul>
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
    <li><a>Link 3</a></li>
</ul>

E queremos ouvir esse evento:

$('ul a').on('click', () => console.log('Cliquei'))

Se clicarmos em um desses três itens, a função será executada e o log será mostrado.

Porém, se adicionarmos mais um li de maneira dinâmica:

<ul>
    <li><a>Link 1</a></li>
    <li><a>Link 2</a></li>
    <li><a>Link 3</a></li>
    <li><a>Link 4</a></li>
</ul>

O quarto elemento não será clicado, isso porque nosso listener já passou e ele não estava lá naquele momento.

Para resolver esse problema, nós podemos adicionar o listener para o pai de a:

$('ul').on('click', 'a', () => console.log('Cliquei'))

Dessa maneira o evento de click vai subindo até o ul e depois verificamos se o evento que chegou de click para o nosso ul foi disparado pelo a.

Esse é um fluxo completo de Event Delegation, junto com Event Propagation e Event Bubbling.

Espero ter ajudado.

Obrigado, ficou bem claro agora!

Magina, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.