jQuery - Tratamento de Eventos

Temos a capacidade de criar páginas da web dinâmicas usando eventos. Eventos são ações que podem ser detectadas por seu aplicativo da web.

A seguir estão os exemplos de eventos -

Um clique do mouse
Uma página da web carregando
Passando o mouse sobre um elemento
Envio de um formulário HTML
Um pressionamento de tecla em seu teclado, etc.

Quando esses eventos são disparados, você pode usar uma função personalizada para fazer praticamente o que quiser com o evento. Essas funções personalizadas chamam manipuladores de eventos.

Binding Event Handlers

Usando o modelo de evento jQuery, podemos estabelecer manipuladores de eventos em elementos DOM com o bind() método da seguinte forma -

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Este código fará com que o elemento de divisão responda ao evento de clique; quando um usuário clica dentro desta divisão, o alerta será mostrado.

Isso produzirá o seguinte resultado -

A sintaxe completa do comando bind () é a seguinte -

selector.bind( eventType[, eventData], handler)

A seguir está a descrição dos parâmetros -

eventType- Uma string contendo um tipo de evento JavaScript, como clicar ou enviar. Consulte a próxima seção para uma lista completa de tipos de eventos.
eventData - Este parâmetro opcional é um mapa de dados que será passado para o manipulador de eventos.
handler - Uma função a ser executada cada vez que o evento é acionado.

Removendo manipuladores de eventos

Normalmente, depois que um manipulador de eventos é estabelecido, ele permanece em vigor pelo restante da vida útil da página. Pode ser necessário quando você deseja remover o manipulador de eventos.

jQuery fornece o unbind()comando para remover um manipulador de eventos existente. A sintaxe de unbind () é a seguinte -

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

A seguir está a descrição dos parâmetros -

eventType- Uma string contendo um tipo de evento JavaScript, como clicar ou enviar. Consulte a próxima seção para uma lista completa de tipos de eventos.
handler - Se fornecido, identifica o ouvinte específico que deve ser removido.

Tipos de Eventos

A seguir estão as plataformas cruzadas e os tipos de eventos recomendados que você pode ligar usando JQuery -

Sr. Não.	Tipo e descrição do evento
1	blur Ocorre quando o elemento perde o foco.
2	change Ocorre quando o elemento muda.
3	click Ocorre quando um clique do mouse.
4	dblclick Ocorre quando um clique duplo do mouse.
5	error Ocorre quando há um erro no carregamento ou descarregamento etc.
6	focus Ocorre quando o elemento obtém o foco.
7	keydown Ocorre quando a tecla é pressionada.
8	keypress Ocorre quando a tecla é pressionada e liberada.
9	keyup Ocorre quando a tecla é liberada.
10	load Ocorre quando o documento é carregado.
11	mousedown Ocorre quando o botão do mouse é pressionado.
12	mouseenter Ocorre quando o mouse entra em uma região de elemento.
13	mouseleave Ocorre quando o mouse sai de uma região de elemento.
14	mousemove Ocorre quando o ponteiro do mouse se move.
15	mouseout Ocorre quando o ponteiro do mouse sai de um elemento.
16	mouseover Ocorre quando o ponteiro do mouse se move sobre um elemento.
17	mouseup Ocorre quando o botão do mouse é liberado.
18	resize Ocorre quando a janela é redimensionada.
19	scroll Ocorre quando a janela é rolada.
20	select Ocorre quando um texto é selecionado.
21	submit Ocorre quando o formulário é enviado.
22	unload Ocorre quando os documentos são descarregados.

O Objeto do Evento

A função de retorno de chamada tem um único parâmetro; quando o manipulador é chamado, o objeto de evento JavaScript passa por ele.

O objeto de evento é freqüentemente desnecessário e o parâmetro é omitido, já que contexto suficiente geralmente está disponível quando o manipulador é obrigado a saber exatamente o que precisa ser feito quando o manipulador é disparado; no entanto, existem certos atributos que você precisa acessar.

Os Atributos do Evento

As seguintes propriedades / atributos do evento estão disponíveis e são seguros para acesso de maneira independente da plataforma -

Sr. Não.	Descrição da Propriedade
1	altKey Definido como verdadeiro se a tecla Alt foi pressionada quando o evento foi disparado, falso se não. A tecla Alt é rotulada como Option na maioria dos teclados Mac.
2	ctrlKey Definido como verdadeiro se a tecla Ctrl foi pressionada quando o evento foi disparado, falso se não.
3	data O valor, se houver, passado como o segundo parâmetro para o comando bind () quando o manipulador foi estabelecido.
4	keyCode Para eventos keyup e keydown, isso retorna a tecla que foi pressionada.
5	metaKey Definido como verdadeiro se a tecla Meta foi pressionada quando o evento foi disparado, falso se não. A tecla Meta é a tecla Ctrl em PCs e a tecla Command em Macs.
6	pageX Para eventos de mouse, especifica a coordenada horizontal do evento em relação à origem da página.
7	pageY Para eventos de mouse, especifica a coordenada vertical do evento em relação à origem da página.
8	relatedTarget Para alguns eventos de mouse, identifica o elemento que o cursor saiu ou inseriu quando o evento foi disparado.
9	screenX Para eventos de mouse, especifica a coordenada horizontal do evento em relação à origem da tela.
10	screenY Para eventos de mouse, especifica a coordenada vertical do evento em relação à origem da tela.
11	shiftKey Definido como verdadeiro se a tecla Shift foi pressionada quando o evento foi disparado, falso se não.
12	target Identifica o elemento para o qual o evento foi disparado.
13	timeStamp O carimbo de data / hora (em milissegundos) quando o evento foi criado.
14	type Para todos os eventos, especifica o tipo de evento que foi disparado (por exemplo, clique).
15	which Para eventos de teclado, especifica o código numérico para a tecla que causou o evento, e para eventos de mouse, especifica qual botão foi pressionado (1 para a esquerda, 2 para o meio, 3 para a direita).

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Os Métodos de Evento

Há uma lista de métodos que podem ser chamados em um objeto de evento -

Sr. Não.	Método e Descrição
1	preventDefault () Evita que o navegador execute a ação padrão.
2	isDefaultPrevented () Retorna se event.preventDefault () já foi chamado neste objeto de evento.
3	stopPropagation () Interrompe o borbulhamento de um evento para os elementos pai, evitando que qualquer manipulador pai seja notificado sobre o evento.
4	isPropagationStopped () Retorna se event.stopPropagation () já foi chamado neste objeto de evento.
5	stopImmediatePropagation () Impede a execução do restante dos manipuladores.
6	isImmediatePropagationStopped () Retorna se event.stopImmediatePropagation () já foi chamado neste objeto de evento.

Métodos de manipulação de eventos

A tabela a seguir lista métodos importantes relacionados a eventos -

Sr. Não.	Método e Descrição
1	vincular (tipo, [dados], fn) Vincula um manipulador a um ou mais eventos (como clique) para cada elemento correspondido. Também pode ligar eventos personalizados.
2	desligado (eventos [, seletor] [, manipulador (objetoEvento)]) Isso faz o oposto de ao vivo, ele remove um evento ao vivo vinculado.
3	pairar (acima, fora) Simula pairar, por exemplo, mover o mouse para dentro e para fora de um objeto.
4	em (eventos [, seletor] [, dados], manipulador) Vincula um manipulador a um evento (como um clique) para todos os elementos correspondentes atuais e futuros. Também pode ligar eventos personalizados.
5	um (tipo, [dados], fn) Vincula um manipulador a um ou mais eventos a serem executados uma vez para cada elemento correspondido.
6	pronto (fn) Vincula uma função a ser executada sempre que o DOM está pronto para ser percorrido e manipulado.
7	gatilho (evento, [dados]) Acione um evento em cada elemento correspondente.
8	triggerHandler (evento, [dados]) Aciona todos os manipuladores de eventos associados em um elemento.
9	desvincular ([tipo], [fn]) Isso faz o oposto de vincular, remove eventos vinculados de cada um dos elementos correspondentes.

Métodos auxiliares de eventos

jQuery também fornece um conjunto de funções auxiliares de eventos que podem ser usadas para acionar um evento para vincular qualquer tipo de evento mencionado acima.

Métodos de gatilho

A seguir está um exemplo que aciona o evento de desfoque em todos os parágrafos -

$("p").blur();

Métodos de ligação

A seguir está um exemplo que ligaria um click evento em todos os <div> -

$("div").click( function () { 
   // do something here
});

Aqui está uma lista completa de todos os métodos de suporte fornecidos pela jQuery -

Sr. Não.	Método e Descrição
1	blur( ) Aciona o evento de desfoque de cada elemento correspondente.
2	blur( fn ) Vincule uma função ao evento de desfoque de cada elemento correspondente.
3	change( ) Aciona o evento de mudança de cada elemento correspondido.
4	change( fn ) Vincula uma função ao evento de mudança de cada elemento correspondido.
5	click( ) Aciona o evento de clique de cada elemento correspondido.
6	click( fn ) Vincula uma função ao evento de clique de cada elemento correspondido.
7	dblclick( ) Aciona o evento dblclick de cada elemento correspondido.
8	dblclick( fn ) Vincula uma função ao evento dblclick de cada elemento correspondido.
9	error( ) Aciona o evento de erro de cada elemento correspondido.
10	error( fn ) Vincula uma função ao evento de erro de cada elemento correspondido.
11	focus( ) Aciona o evento de foco de cada elemento correspondente.
12	focus( fn ) Vincula uma função ao evento de foco de cada elemento correspondido.
13	keydown( ) Aciona o evento keydown de cada elemento correspondido.
14	keydown( fn ) Vincule uma função ao evento keydown de cada elemento correspondente.
15	keypress( ) Aciona o evento de pressionamento de tecla de cada elemento correspondente.
16	keypress( fn ) Vincula uma função ao evento de pressionamento de tecla de cada elemento correspondido.
17	keyup( ) Aciona o evento keyup de cada elemento correspondido.
18	keyup( fn ) Vincule uma função ao evento de ativação de cada elemento correspondido.
19	load( fn ) Vincula uma função ao evento de carregamento de cada elemento correspondido.
20	mousedown( fn ) Vincula uma função ao evento mousedown de cada elemento correspondido.
21	mouseenter( fn ) Vincule uma função ao evento mouseenter de cada elemento correspondido.
22	mouseleave( fn ) Vincule uma função ao evento mouseeleave de cada elemento correspondente.
23	mousemove( fn ) Vincule uma função ao evento mousemove de cada elemento correspondente.
24	mouseout( fn ) Vincule uma função ao evento mouseout de cada elemento correspondido.
25	mouseover( fn ) Vincule uma função ao evento mouseover de cada elemento correspondente.
26	mouseup( fn ) Vincule uma função ao evento mouseup de cada elemento correspondido.
27	resize( fn ) Vincule uma função ao evento de redimensionamento de cada elemento correspondente.
28	scroll( fn ) Vincule uma função ao evento de rolagem de cada elemento correspondido.
29	select( ) Acione o evento de seleção de cada elemento correspondido.
30	select( fn ) Vincule uma função ao evento de seleção de cada elemento correspondido.
31	submit( ) Acione o evento de envio de cada elemento correspondente.
32	submit( fn ) Vincule uma função ao evento de envio de cada elemento correspondido.
33	unload( fn ) Vincula uma função ao evento de descarregamento de cada elemento correspondido.