4

Dei uma pesquisada mas não há uma listagem de comparação entre as funções abaixo:

$().click(fn)
$().bind('click', fn)
$().live('click', fn)
$().delegate(selector, 'click', fn)
$().trigger('click') 
$().on('click', selector, fn);

Como todas as funções acima funcionam exatamente? Quais devem ser priorizadas em quais situações?

2 Respostas 2

10

Todas estas funções estão relacionadas a eventos. Então precisamos entender alguns conceitos para ir adiante.

Event Phase

Quando um evento é emitido ele tem 3 fases, um handler de evento pode saber em que fase está através da propriedade Event.eventPhase. As fases são:

  1. CAPTURING_PHASE: o evento é propagado do window até o elemento alvo do evento (Event.target)
  2. AT_TARGET: o evento chegou no seu alvo
  3. BUBBLING_PHASE: o evento é propagado de volta até window.

Estas fase podem ser melhor visualizadas na imagem a seguir (fonte):

Fases de propagação de um evento

E agora você já sabe para que serve o parâmetro useCapture do método addEventListener, por padrão o handler intercepta o evento na fase de bubbling, mas você pode alterar isso através deste parâmetro. ;)

Delegation

Sabendo disso, agora precisamos entender o que significa delegar um evento (este é um bom artigo para ajudar no entendimento).

A delegação de eventos consiste em atribuir o handler de eventos de um elemento alvo a um elemento pai. Ou seja, ao invés do handler do evento ser atribuído no elemento alvo e ser executado na fase AT_TARGET, ele vai ser atribuído para um elemento pai deste elemento alvo e vai ser executado na fase CAPTURING_PHASE ou BUBBLING_PHASE.

Qual a vantagem disso? A principal vantagem é que o elemento alvo não precisa existir ao atribuir o handler ao evento, apenas o elemento pai. Fazendo com que elementos inseridos dinamicamente na página reajam aos eventos delegados sem precisar atribuir um handler a cada um deles.

Um rápido exemplo para ilustrar como isso funciona:

let pai = document.querySelector('#elemento-pai');

pai.addEventListener('click', function(event) {
  // #pai não é alvo, mas está interceptando o evento
  // na fase de bubbling
  if (event.target.classList.contains('elemento-alvo')) {
    event.target.classList.toggle('active');
  }
});

// adiciona itens dinamicamente à lista
let btn = document.querySelector('#add');
btn.addEventListener('click', function() {
  let li = document.createElement('li');
  li.className = "elemento-alvo";
  li.innerHTML = "Item dinâmico";
  pai.appendChild(li);
});
.elemento-alvo.active {
    color: red;
}
<ul id="elemento-pai">
  <li class="elemento-alvo">Item</li>
  <li class="elemento-alvo">Item</li>
</ul>
<button id="add">+</button>

Agora que o conceito de delegação de eventos está mais claro, fica mais fácil explicar a pergunta.

Vamos começar dividindo os métodos em categorias (ou por funcionalidade, ou sei lá).

Vamos chamar de: Escutar eventos, Emitir Eventos e Atalhos.


  1. Escutar eventos:

    • bind (descontinuado no jQuery 3.0): adiciona um handler para um evento no elemento (fase AT_TARGET).
    • live (descontinuado no jQuery 1.7): adicionar um handler para um evento através de delegation. Porém o "elemento pai" é sempre document.
    • delegate (descontinuado no jQuery 3.0, seu uso é desencorajado desde o jQuery 1.7): também adiciona um handler para um evento através de delegation, só que é possível escolher o "elemento pai".
    • on: é o método recomendado a ser usado, visto que ele faz o que todos os outros podem fazer.

      Você pode atribuir handler para um evento diretamente no elemento. Ex.:

      $('#btn').on('click', myHandler)
      

      Ou delegar o evento:

      $('#elemento-pai').on('click', '.elemento-target', myHandler)
      
  2. Emitir eventos:

    • trigger: é o métodos que você emite o evento para que os handlers sejam chamados.
  3. Atalhos: São métodos para facilitar o uso de alguns métodos comumente utilizados. No geral $elemento.evento(...) é equivalente a $elemento.on('evento', handler) quando usado para escutar um evento ou $elemento.trigger('evento') quando é para emitir o evento.

    • click;

      $elemento.click(function(){});
      // mesmo que
      $elemento.on('click', function(){});
      
      $elemento.click();
      // mesmo que
      $elemento.trigger('click');
      
    • focus;

      $elemento.focus(function(){});
      // mesmo que
      $elemento.on('focus', function(){});
      
      $elemento.focus();
      // mesmo que
      $elemento.trigger('focus');
      
    • blur;

      $elemento.blur(function(){});
      // mesmo que
      $elemento.on('blur', function(){});
      
      $elemento.blur();
      // mesmo que
      $elemento.trigger('blur');
      
    • outros eventos...

2
  • 1
    +1, muito mais detalhada que minha resposta que escrevi com pressa :)
    – bfavaretto
    28/09/2018 às 20:40
  • 1
    Depois que entende é fácil, mas é difícil de explicar. Eu sabia as diferenças mas quando comecei a escrever e demorar demais ia lançar uma versão reduzida. Aí você já tinha postado sua resposta e decidi seguir na labuta. :D 28/09/2018 às 20:42
4

Os métodos live e delegate são formas antigas de delegação de eventos, e já foram removidas da biblioteca. Atualmente se deve fazer delegação com a sintaxe:

$('seletor').on('evento', 'outro-seletor', callback);

$('seletor').click(fn) é simplesmente um atalho para $('seletor').on('click', fn). O bind também é uma forma antiga que foi removida da biblioteca, e substituída pelo .on.

O .trigger faz o contrário do que todos esses outros métodos. Como o nome diz, ele dispara um evento. Já .on e atalhos como .click tratam eventos disparados por terceiros.

Você deve fazer log-in para responder a esta pergunta.