Delegando listener no JQuery sem problemas

Facebook Linkedin Instagram Pinterest

O JQuery é o framework Javascript, e a cada nova versão, novos recursos são implementados. Nas últimas versões, foram implementados novos métodos que possibilitam a delegação de listener sem maiores dificuldades.

Como utilizar os novos métodos On e Off do JQuery

DELEGANDO EVENTOS

Ao definir listener de eventos no JQuery, a forma mais utilizada e a mais simples é:

// Exemplo de listener do evento click.
$("[seletor]").click( funcrion() {
 [comandos]
} );

Até ai tudo bem. Acontece que se o seletor for adicionado ao DOM depois que a página for carregada com a utilização do método append() do JQuery, com a uma execução Ajax, o listener se perderá uma vez que o elemento do seletor ainda não existia quando o listener for definido.

Conforme a própria equipe do JQuery recomenda, a melhor forma de construir listeners é com a utilização do método on() e para destruir usar o método off().

Então o código acima ficaria assim:

// Exemplo de listener do evento click usando on().
$('[seletor]').on('click', function(event) {
 event.preventDefault();
});

Isso funcionaria mas não resolveria o problemas da perda do listener para os elementos adicionados posteriormente ao DOM. Para resolver o problema, deve-se utilizar a segunda sintaxe do método on(), passando-se o seletor que receberá o listener no segundo parâmetro de on().

$(document).on('click', 'a', function(event) {
 event.preventDefault();
});

Desta forma, estamos construindo o listener para a evento click para todo o documento (document) que já está no DOM, e passando o a seletor de filtro, no exemplo uma âncora, como filtro. Assim, todos os elementos de âncora que fazem parto de document, incluindo os adicionados posteriormente ou dinamicamente ao DOM, receberam o listener.

REMOVENDO EVENTOS

Já, se for necessário remover um listener de um elemento do DOM, deve-se utilizar o método Off().

// Remove todos os eventos das âncoras no DOM.
$('a').off();
// Remove apenas o evento "submit" de todos os formulários no DOM.
$('form').off('submit');

Jorge Rodrigues

Webmaster e desenvolvedor web full-stack. Self-employed na Concepção Web. Técnico em processamento de dados, com especialização em Programação de Computadores, Redes Locais e em Protocolo e Cabeamento Estruturada de Redes Locais pela Universidade Estácio de Sá.

More Posts

Olá, antes de continuar, precisamos que você forneça algumas informações de contato.

Desenvolvido por Concepção Web.