Publicado em 7 de mai.

jQuery funções bind e delegate qual a melhor opção?

Tudo beleza pessoal

Me deparei com essas duas funções bind() e delegate() do jQuery. Bom elas anexas um ou mais eventos para todos os elementos que correspondem ao seletor, mas a função delegate() tem a vantagem de não importa se ele elemento já existe ou se vai existir futuramente ela terá aqueles eventos e manipuladores descrito na delegate(), coisa que a bind() não faria.

Então fica a minha dúvida, e melhor sempre usar a função delegate() do que a bind() ???

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

William Bruno· 7 de mai.

Delegate é melhor.

Pelo fato de que é possível economizar handlers de eventos. Por exemplo, em vez de vc atrelar um addEventeListener("click", ..) para 10 LIs de um menu, com delegate(), vc consegue fazer um único

addEventListener para o #menu em si, e então, dai o click dele, escutar o click dos filhos com base na propagação de eventos (event bubble) e event.target

Wilson Batista· 7 de mai.

Obrigado William Bruno pela ajuda!

Andre Luizao· 8 de mai.

Delegate é melhor. Pelo fato de que é possível economizar handlers de eventos.

William poderia explicar o que seria esse handlers de eventos ??

William Bruno· 8 de mai.

Oi Andre Luizao, pensa assim:

$element1.addEventListener("click", function(){
 //do something
});
$element2.addEventListener("click", function(){
 //do something
});
$element3.addEventListener("click", function(){
 //do something

});ok ?Tenho 3 event handlers (manipuladores de eventos), pense como observers que escutam algo e disparam uma função como resposta.

É o velho conhecido:

$('.text').click(function(){
 //do something

});só que aplicado em js puro ali em cima.

O "problema", é que imagine a situação:

<nav id="menu">
 <a href="">1</a>
 <a href="">2</a>
 <a href="">3</a>
 <a href="">4</a>
 <a href="">5</a>
</nav>fazendo:

$('#menu a').click(function(){
 //do some stuff
});você está colocando um handler (addEventListener) para cada tag <a>. Então, nesse caso, teria 5, e conforme criasse mais tags, esse número aumentaria, ocupando mais memória do browser do usuário, e utilizando mais recursos do navegador, já que estou com muitos handlers.

Se fizéssemos com delegate:

$('#menu').on("click", "a", function(){
 //do some stuff
});Estamos colocando **um único** event handler no **elemento pai**, e então, testando se o filho (tag <a>) foi o alvo (event.target)

Logo, em vez de termos 5 addEventListerners, ou mais, com a técnica acima (delegate), eu tenho uma única. Economizando memória e tudo mais.

Em js puro, ficaria mais ou menos assim:

document.getElementById('menu').addEventListener("click", function(event){
 if (event.target.tagName === "A") {
 //do something usefull
 }

});E no outro modelo, seria:

var $as = document.getElementById('menu').getElementsByTagName('a');
$as = [].slice.call($as);

$as.forEach(function($each){
 $each.addEventListener("click", function(event){
 if (event.target.tagName === "A") {
 //do something usefull
 }
 });
});Veja que pelo loop (forEach), eu coloco um monte de event handlers, onde com delegate, eu coloco um só, não importando quantas tags <a> eu tenho dentro de #menu

Deu para entender ?