Ao longo doManual de jQuery já aprendemos bastantes coisas sobre os eventos neste framework Javascript. Vimos como a partir de diversos métodos como click(), mouseenter() e similares, podemos atribuir um manipulador de evento (uma função) a um tipo de evento específico.

Agora vamos aprender a utilizar uma única função de jQuery para definir qualquer tipo de evento, o que seria uma maneira geral de definir eventos, de qualquer tipo, sobre elementos da página. Além disso, mostraremos como se pode eliminar um evento, tirando um possível manipulador de eventos definido anteriormente.

Aprendemos no passado a definir eventos por meio de funções específicas para cada tipo de evento. Por exemplo:

$("#elem1").click(function(){
   //evento click sobre o elemento com id "elem1"
});

$("#elem2").mouseenter(function(){
   //evento de entrar com o mouse sobre o elemento com id "elem2"
});

Estes modos de trabalhar são perfeitamente viáveis e muito cômodos de utilizar para criar eventos de um tipo específico, porém em jQuery existe outra maneira de defini-los com a que ganharemos alguma vantagem.

Método bind() para definir qualquer tipo de evento

Com o método bind() podemos definir de um modo geral qualquer tipo de evento, ou inclusive um mesmo manipulador de eventos para diferentes tipos de eventos distintos. O uso mais habitual deste método é o seguinte:

bind(tipo_de_evento, manipulador)

Como primeiro parâmetro enviamos o tipo de evento que queremos definir. Se desejarmos, poderemos especificar vários tipos de eventos separados por um espaço e assim designar um mesmo manipulador de evento para vários tipos de situações.

Como segundo parâmetro se indica o manipulador ou função a ser executada quando se produza o evento, igual a como se definia com os métodos click(), mouseleave() ou similares, para um tipo de evento em específico.

Um exemplo simples deste modo de definir eventos é o seguinte:

$(".minhaclasse").bind("click", function(){
   alert("Você clicou");
});

Ao clicar em qualquer elemento da classe CSS "minhaclasse", aparecerá uma mensagem em uma caixa de alerta.

Agora, podemos ver como se criaria uma função que se atribuiria a vários tipos de eventos simultaneamente.

$("p").bind("click mouseenter mouseleave", function(e){
   if ($(this).css("color")!="rgb(250, 100, 0)")
      $(this).css("color", "rgb(250, 100, 0)");
   else
      $(this).css("color", "rgb(150, 0, 255)");
})

Como se pode ver, se definiu um evento para todos os parágrafos da página, que se ativará com os tipos de eventos: "click mouseenter mouseleave". A função que funciona como manipulador de eventos verifica a cor do elemento e a vai intercambiando entre duas cores diferentes. Este evento será executado ao clicar, ao entrar no elemento com o ponteiro do mouse ou ao sair do elemento com o mouse.

Eliminar um evento com a função unbind()

Agora vamos aprender a fazer o passo contrário, ou seja, eliminar um evento previamente atribuído a um elemento ou a vários elementos da página. O procedimento é bastante simples.

Se invocamos unbind() sem nenhum parâmetro, eliminamos todos os manipuladores de eventos, de qualquer tipo de evento, dos objetos jQuery.

$("p").unbind();

Assim eliminamos todos os eventos associados com os parágrafos da página. Porém, talvez uma situação mais habitual seja querermos eliminar apenas os eventos de um tipo e para tanto só temos que indicar como parâmetro esse tipo específico de evento desejado.

$("p").unbind("click");

Esta sentença provocará que se descartem todos os manipuladores de eventos associados ao click sobre os parágrafos. Como se pode entender, sobre esses elementos não acontecerá nada no momento em que cliquemos. Além do mais, supondo que outros scripts Javascript tenham definido algum manipulador de evento click sobre algum dos elementos, unbind() também eliminará esses possíveis eventos.

Para não eliminar todos os manipuladores de eventos de um tipo determinado podemos especificar a função que desejamos descartar na lista de parâmetros da chamada a unbind(). Isto funcionaria em um esquema de código como o seguinte.

var funcaoManipulador = function(e) {
   // qualquer código
}
$("p").bind('click', funcaoManipulador);
$("p").unbind('click', funcaoManipulador);

Sempre teremos que colocar a função dentro de uma variável, para nos podermos referir a essa mesma variável tanto ao criar o evento com bind(), quanto ao descartá-lo com unbind().

Exemplos com os métodos bind() e unbind() de jQuery

A continuação se pode ver o código de uma página completa que coloca em prática as explicações oferecidas no artigo.

O exemplo pode ser visto em funcionamento em uma página à parte.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<html lang="es">
<head>
<title>Eventos bind</title>
   <script src="../jquery-1.4.2.min.js"></script>
<script language="javascript">
$(document).ready(function(){
   
   $("p").bind("click mouseenter mouseleave", function(e){
      if ($(this).css("color")!="rgb(250, 100, 0)")
         $(this).css("color", "rgb(250, 100, 0)");
      else
         $(this).css("color", "rgb(150, 0, 255)");
   })
   
   function clicAlerta(){
      alert("Você clicou");
   }
   
   $(".minhaclasse").bind("click", clicAlerta);
   
   $("#eliminarevento").bind("click", function(){
      $(".minhaclasse").unbind("click", clicAlerta);
   })
})
</script>
</head>
<body>

<p class="minhaclasse">Primeiro parágrafo</p>
<p>Outro parágrafo</p>

<input type=button value="Eliminar o alert do click do primeiro parágrafo" id="eliminarevento">
</body>
</html>

No próximo artigo veremos uma utilização interessante para definir eventos sobre elementos atuais e futuros sobre um seletor jQuery, que nos facilitará as coisas em scripts mais complexos.