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
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
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.