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.