Trabalhar com eventos no JavaScript nem sempre é uma tarefa fácil. Há momentos que precisamos retirar um evento de um elemento ou adicionar um evento a determinado elemento HTML. Vou mostrar duas funções de manipulação de eventos para os elementos ou seletores selecionados. Estou me referindo aos métodos .on() e .off(). Neste artigo vou mostrar uma breve introdução a estes dois manipuladores e como resolver algumas dificuldade frequentes de quem trabalha com JavaScript.
Trabalhar com esses métodos de associação de eventos é realmente fácil de adicionar um evento que não está mais “ouvindo” seu JavaScript. Da mesma forma é fácil para remover o evento de um elemento. Você pode querer adicionar um evento ou retirar um evento de um elemento que foi criado depois da página carregar. .on(), .off() e namespaces vão lhe ajudar.
Imagine que você tenha o código HTML abaixo:
<body>
<h2>Adicionar itens</h2>
<input type="text" name="checkListItem" id="inpudAdd"/>
<button id="button">OK</button>
<div class="boxLista"></div>
</body>
E o seguinte código jQuery
$('#button').click(function(){
var textAdd = $('#inpudAdd').val();
$('#inpudAdd').val('');
$('.boxLista').append('<div class="item">' + textAdd + '</div>');
});
Bom, não precisamos entender muito de jQuery para entender o que o código acima faz. Resumindo: O usuário digita um texto no input, clica em ok, o texto é adicionado em uma div.
Caso o usuário queira exclui o texto clicando sobre a linha podemos adicionar a seguinte linha de código:
$(document).on('click', '.item', function(){
$(this).remove();
});
Num primeiro momento muitos são capazes de dizer que isso funciona. A verdade é que isso não vai funcionar. Essa é uma dúvida muito comum por quem está começando com JavaScript: “Por que meus eventos não funcionam quando clico em elementos criado após o carregamento da página.” A resposta é simples. Ao carregar a página a biblioteca jQuery /Javascript procura por todos os elementos quando o DOM é carregado. Quando seu documento estiver pronto a biblioteca já terá decidido que não há uma classe chamada “.item” para ser removida com a método .remove(), e seu script não vai funcionar.
A maioria dos códigos JavaScript é acionado a partir de um evento. A página é carregada, você pressiona uma tecla, clica em um botão, etc. Tudo isso são eventos.
Manipulador de eventos on()
Para resolver o problema descrito vamos usar o manipulador de evento .on() que nos permite lidar com a manipulação do DOM em tempo real. O método .no () fornece todas as funcionalidades necessárias para anexar manipuladores de eventos. Ele funciona como um manipulador geral de eventos que pega o evento, seu seletor, e uma ação a ser disparada. Exemplo da sintaxe .on() é algo como:
$(document).on('event', 'selector', function() {
Realize Alguma Coisa!
});
Traduzindo essa sintaxe para o nosso problema teríamos o seguinte código:
$(document).on('click', '.item', function(){
$(this).remove();
});
Repare no exemplo acima que usamos $(document).on(‘event’, ‘selector’, function(). Usei document pois ele é o documento em si, a página e essa sempre irá existir indepenendete se o seu seletor já foi criado ou não, ou seja, o evento sempre irá disparar. Nada nos impede de usar algo um pouco diferente, por exemplo.
$("#box").on("click", function() {
//seu código aqui
});
Caso utiliza o script acima e o seletor #box ainda não exista na árvore do documento (DOM) ou tiver sido removido o evento não será executado. Na dúvida utilize document, como dito anteriormente ele sempre estará presente no DOM.
A diferença fica por conta do seguinte se você estiver utilizando $(seletor).(event, function) e o seu seletor ainda não existir no DOM ou tiver sido removido o evento não será executado. Porém se você utilizar $(document).on(evento, seletor, function) o document sempre irá existir na página independente se o seletor já está criado ou foi removido e adicionado posteriormente, fazendo com que o evento dispare.
Como usar namespaces em jQuery
Como você pode garantir de uma maneira segura que não vai acidentalmente desvincular outros manipuladores de clique. Por exemplo, clicar em um botão e ser disparado dois eventos ao mesmo tempo. Eventos namespaces resolvem o problema. Para isso utilizamos o método .on() informando o evento que queremos e o nomamespace separados por um ponto(.) e a função que deverá ser executada.Abaixo dois exemplos de código. O primeiro não usa namespaces. Nesse caso não seria possível desassociar os eventos. Já no segundo caso fizemos uso de namespaces.
/*Sem namespaces*/
$('#button').click(function(){
console.log("Primeiro evento click");
});
$('#button').click(function(){
console.log("Segundo evento click");
});
/*Com namespaces*/
$(document).on("click.primeiro", function() {
console.log("Primeiro evento click");
});
$(document).on("click.segundo", function() {
console.log("Segundo evento click");
});
Se executarmos os dois scripts perceba que ambos irão mostrar as duas mensagens, porém no segundo exemplo como fizemos uso de namespaces (um apelido) conseguimos desassoicar os eventos.
Desassociando eventos com .off()
Dependendo do tamanho do seu código, funções e uso de outras bibliotecas pode ocorrer de você precisar disparar o mesmo evento num elemento que já possui evento associado a ele. Como vimos no exemplo anterior ao clicar no botão os dois eventos serão disparados. Mas e se eu quiser que apenas um deles seja disparado.
Com o método .off () podemos retirar eventos dos elementos. Todos os parâmetros desse método são opcionais – usando os parâmetros lhe permitirá ser mais específico na manipulação de eventos que você deseja desativar. No exemplo abaixo acrescentamos uma linha que removera o evento no qual tem como namespace o valor primeiro. Agora ao clicar no botão apenas a mensagem “Segundo evento click” irá aparecer no console.
$(document).on("click.primeiro", function() {
console.log("Primeiro evento click");
});
$(document).on("click.segundo", function() {
console.log("Segundo evento click");
});
$(document).off("click.primeiro");
Outros exemplos de uso do método .off()
//remove todos eventos cliques
$(document).off("click");
//remove qualquer evento associado a todos parágrafos
$(p).off();
Curta a página do blog kadunew no Facebook. Siga-me no Twitter: @kadunew ou assine nosso Feed e fique por dentro de todas atualizações aqui do blog.
novembro 25, 2016 em 8:32 am
Cara só queria agradecer pelo seu post, eu estava com um problema aqui e não sabia como resolver (sou novo nesse negócio de Javascript kkk) e lendo seu post eu entendi o conceito e consegui chegar a solução do meu problema.
É importante resaltar que seu texto não tinha a resposta para o meu problema, mas o conceito que você apresentou me fez entender como as coisas funcionam e conseguir concluir a causa do meu problema.
Obrigado!