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

[Wilson Batista 0]

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() ???

[William Bruno 1501]

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 0]

Obrigado William Bruno pela ajuda!

[Andre Luizao 0]

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

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

[William Bruno 1501]

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 ?