2.5 Tratamento de eventos

</script>

Nesse exemplo, independente da sequência de cliques, a função toggle possui internamente um if que testa se o elemento "infoBox" está visível ou não. Caso o elemento esteja visível, a função toggle altera seu estado para oculto e, caso esteja invisível, altera seu estado para visível. Compare com o exemplo da função is() e veja como a programação fica muito mais enxuta.

 

2.5 Tratamento de eventos

Existem diversos tipos de eventos que ocorrem numa página web durante a interação do usuário. Por exemplo, quando o usuário move o mouse, clica sobre um elemento, seleciona um texto, digita um texto, seleciona uma opção, etc. O jQuery oferece um vasto arsenal de funções para lidar com esses eventos, possibilitando capturá-los para disparar rotinas de tratamento de eventos associados a uma ação desejada. Por exemplo, toda vez que o usuário passa o mouse sobre uma imagem, essa mesma poderia ser aumentada para facilitar a visualização de seus detalhes. Esse é um exemplo que envolve a programação de algumas etapas, tais como: associar o evento do "mouse sobre" a aquela imagem específica; monitorar quando esse evento é disparado; tomar uma ação para realizar o resultado desejado. Todas essas etapas são realizadas com o tratamento de eventos que o jQuery oferece em sua API.

 

Evento click

Talvez um dos eventos mais comuns. Ocorre quando o usuário efetua um clique do mouse sobre algum elemento. Vejamos um exemplo de como associar um evento de click a um botão HTML:

<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="UTF-8"/>

<script src="jquery.js"></script>

<style></style>

<script>

$(document).ready(function(){

$("#botao").click(function(){

alert("O botão foi clicado");

});

});

</script>

</head>

<body>

<button id="botao">Clique aqui!</button>

</body>

</html>

Quando o usuário clicar no botão, o evento click já estará sendo monitorado pelo jQuery. Além disso, associamos uma função anônima, passada como parâmetro para a função click, que será executada. É nesse ponto que colocamos a ação que pretendemos realizar quando tal evento ocorrer. Por exemplo, vamos supor que toda vez que o click é realizado, a função toggleClass é chamada para adicionar ou remover a classe black na tag body:

<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="UTF-8"/>

<script src="jquery.js"></script>

<style>

.black{

background-color: #000;

color: #fff;

}

</style>

<script>

$(document).ready(function(){

$("#botao").click(function(){

$("body").toggleClass("black");

});

});

</script>

</head>

<body>

<button id="botao">Clique aqui!</button> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua.</p>

</body>

</html>

 

Evento mouseover

Ocorre quando o usuário passa o cursor do mouse sobre determinado elemento. Veja o exemplo a seguir, que modifica a cor de fundo de uma div com id #texto toda vez que o mouse passa sobre a mesma:

<script>

$(document).ready(function(){

$("#texto").mouseover(function(){

$(this).css("background-color","red");

});

});

</script>

Observe o uso do this. É comum o seu uso quando se trabalha com eventos, pois geralmente quando capturamos um evento sobre um determinado elemento, o próprio elemento é o alvo da ação que se realizará logo a seguir. Portanto, nesse caso o this se refere ao elemento #texto, que é a div.

 

Evento change

Este evento pode ser bastante útil para capturarmos quando o estado de um elemento é alterado. Considere que precisamos alterar o src de uma imagem de acordo com a opção selecionada em um select. Usando o evento change fica fácil fazer isso:

<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="UTF-8"/>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$("#foto").hide();

$("#modelos").change(function(){

$("#foto").attr("src",$(this).val());

$("#foto").show();

});

});

</script>

</head>

<body>

Selecione o modelo de carro:

<select id="modelos">

<option></option>

<option value="palio.png">Palio</option> <option value="corsa.png">Corsa</option> <option value="gol.png">Gol</option>

</select>

<img src="" id="foto"/>

</body>

</html>

Nesse exemplo, a função change só é disparada quando o select tem seu valor modificado. Assim, basta usar a função attr() para modificar o atributo src da imagem.

 

Evento keypress

O evento keypress pertence à outra categoria de eventos associados a ações que o usuário realiza através do uso do teclado. A função keypress permite monitorar quando uma tecla é pressionada e assim realizar algum tipo de ação. Considere o código a seguir:

<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="UTF-8"/>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$("#nome").keypress(function(evento){

$("#exibe").append("Código ascii da tecla digitada: " +

evento.keyCode + "<br>");

});

});

</script>

</head>

<body>

Digite seu nome: <input type="text" id="nome"/>

<div id="exibe">

</div>

</body>

</html>

Nesse exemplo é associado um tratador de eventos do tipo "tecla pressionada" ao input #nome. Assim, toda vez que a tecla é pressionada esse tratador é chamado. Nesse caso, a função de tratamento recebe como parâmetro um objeto chamado "evento" que possui informações sobre o evento da tecla pressionada. Com isso é possível saber exatamente qual foi a tecla pressionada através do atributo keyCode. Sabendo disso podemos realizar alguma lógica de decisão como, por exemplo, verificar a tecla digitada pelo usuário e alterar a propriedade CSS da tag body:

<script>

$(document).ready(function(){

$("#nome").keypress(function(evento){

console.log(evento.keyCode);

// se usuário digita "a" muda cor para azul

if(evento.keyCode == 97){

$("body").css("background-color","blue");

}

// se digita "r" muda cor para vermelho

else if(evento.keyCode == 114){

$("body").css("background-color","red");

}

});

});

</script>

 

Evitando o envio do formulário

Toda vez que um usuário pressiona a tecla enter em um campo dentro de um formulário, a ação padrão do navegador web é enviar o formulário para o servidor. Essa ação pode ser indesejável, principalmente quando o usuário comete o erro de teclar enter antes mesmo de completar o preenchimento do formulário. A fim de evitar tal situação, o jQuery oferece uma função que previne o envio do formulário, deixando que o controle de envio do mesmo fique na mão do programador, por exemplo:

<script>

$(document).ready(function(){

$("#formulario input[type='text']").keypress(

function(evento){

// se usuário pressionou tecla enter

if(evento.keyCode == 13){

// anulando o envio do formulário:

evento.preventDefault();

}

});

});

</script>

Com a função preventDefault() cancelamos o evento de submissão do formulário. Essa mesma lógica pode ser utilizada para realizar validações no formulário e impedir que o mesmo seja enviado caso existam campos com valores inválidos.

Função on()

Outra forma de associar um tratador de eventos a um elemento é através da função on(). De fato, essa função é a forma mais recomendada para se adicionar eventos a um elemento. No exemplo a seguir temos uma input com o tratamento de eventos do tipo keyup. Toda vez que uma tecla é liberada, o conteúdo da inputé copiado para a div #exibe :

<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="UTF-8"/>

<script src="jquery.js"></script>

<style>

input{width: 80%; color: green;}

#exibe{

border: 1px solid #CCC;

padding: 20px; margin: 20px;

}

</style>

<script>

$(document).ready(function(){

$("#nome").on("keyup",function(e){

$("#exibe").text($(this).val()); 

});

});

</script>

</head>

<body>

Digite algo: <input type="text" id="nome"/>

<div id="exibe">

</div>

</body>

</html>

Algumas vezes trabalhamos com a criação dinâmica de elementos. Nesse caso, como os elementos são criados depois do código jQuery ter sido executado, a função on() não consegue associar eventos a estes novos elementos. Sendo assim, temos que fazer a delegação de eventos. Observe o código abaixo. Primeiro, declaramos a região de seleção da função on(), neste caso, o elemento body. Quando um keyup é acionado no elemento cuja classe é "fieldName", executamos a função anônima. Deste modo, podemos criar quantos campos "fieldName" quisermos, que automaticamente teremos um tratamento de evento associado a este elemento recém criado:

<script>

$(document).ready(function(){

$("body").on("keyup",".fieldName",function(e){

$("#exibe").text($(this).val()); 

});

});

</script>

 

Função off()

Esta função possui o efeito contrário à função on(). Ela permite desassociar um evento de um elemento. No exemplo abaixo, o elemento #nome terá cancelado todos os eventos a ele associados.

<script>

$(document).ready(function(){

$("#desliga").click(function(){

$("#nome").off();

});

});

</script>

Caso queira cancelar apenas um tipo de evento, deverá especificar qual o evento, passando como parâmetro para a função off:

$("#nome").off("click");

 

Função trigger()

Esta função permite disparar de modo manual um evento. No código abaixo, a input "#changeBody", quando clicada, altera a formatação da body. Observe que, na última linha da função ready, disparamos um clique usando a função trigger, tendo como alvo o checkbox. Com isso, quando a página for carregada automaticamente, o checkbox aparecerá marcado:

<!DOCTYPE html>

<html lang="pt">

<head>

<meta charset="UTF-8"/>

<script src="jquery.js"></script>

<script>

$(document).ready(function(){

$("#changeBody").click(function(){

$("body").css({

"background-color":"black",

"color":"white"

});

});

$("#changeBody").trigger("click");

});

</script>

</head>

<body>

<input type="checkbox" id="changeBody"/>

Clique aqui para alterar a body

</body>

</html>

 

Lista de eventos

A tabela a seguir apresenta uma lista resumida de eventos separados por tipos de eventos: (1) eventos de mouse; (2) eventos de teclado e (3) eventos do browser. Todos esses eventos podem ser mapeados no jQuery e realizado o devido tratamento.

FUNÇÃO DESCRIÇÃO

Eventos de mouse

.change() este evento ocorre toda vez que o valor do elemento é

alterado

.click() ocorre quando um click do mouse é detectado num

elemento

.dbclick() evento de clique duplo sobre um elemento

.focus() ocorre quando um elemento recebe o foco

.hover() ocorre quando o mouse passa sobre um elemento

.mousedown() evento disparado quando o botão do mouse é apertado .mousemove() evento é acionado toda vez que o mouse se movimento

dentro de um elemento

.mouseout() evento é acionado toda vez que o mouse sai de cima de

um elemento

.mouseover() evento é acionado toda vez que o mouse passa sobre o

elemento

.mouseup() evento é acionado toda vez que o botão do mouse é

clicado e liberado

Eventos de teclado

.keydown() evento acionado quando uma tecla é apertada

.keyup() evento acionado quando uma tecla é liberada

.keypress() evento acionado quando uma tecla é pressionada Eventos do browser

.ready() evento acionado indicando que todo o código HTML

foi lido e a árvore DOM está pronta

.resize() evento acionado quando o tamanho da janela do

browser é alterada

 

Função bind() e unbind()

A função bind() permite associar um "ouvinte" de eventos a um elemento. Por exemplo, no código abaixo definimos um botão "Esconder" que, quando clicado, oculta todas as imagens da página. Para mapear o click, que é o gatilho dessa ação, usamos a função bind, passando dois parâmetros: o nome do evento e uma função anônima que contém a lógica para esconder as imagens: