jQuery - Manejo de eventos

Tenemos la capacidad de crear páginas web dinámicas mediante el uso de eventos. Los eventos son acciones que pueden ser detectadas por su aplicación web.

A continuación se muestran los ejemplos de eventos:

Un clic del mouse
Carga de una página web
Colocar el mouse sobre un elemento
Enviar un formulario HTML
Una pulsación de tecla en su teclado, etc.

Cuando se activan estos eventos, puede utilizar una función personalizada para hacer prácticamente lo que quiera con el evento. Estas funciones personalizadas llaman a los controladores de eventos.

Controladores de eventos vinculantes

Usando el modelo de eventos jQuery, podemos establecer controladores de eventos en elementos DOM con el bind() método de la siguiente manera -

<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 hará que el elemento de división responda al evento de clic; cuando un usuario haga clic dentro de esta división a partir de entonces, se mostrará la alerta.

Esto producirá el siguiente resultado:

La sintaxis completa del comando bind () es la siguiente:

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

A continuación se muestra la descripción de los parámetros:

eventType: Una cadena que contiene un tipo de evento de JavaScript, como hacer clic o enviar. Consulte la siguiente sección para obtener una lista completa de los tipos de eventos.
eventData - Este es un parámetro opcional, es un mapa de datos que se pasará al controlador de eventos.
handler - Una función para ejecutar cada vez que se activa el evento.

Eliminar controladores de eventos

Normalmente, una vez que se establece un controlador de eventos, permanece en vigor durante el resto de la vida de la página. Puede haber una necesidad cuando desee eliminar el controlador de eventos.

jQuery proporciona el unbind()comando para eliminar un controlador de eventos existente. La sintaxis de unbind () es la siguiente:

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

A continuación se muestra la descripción de los parámetros:

eventType: Una cadena que contiene un tipo de evento de JavaScript, como hacer clic o enviar. Consulte la siguiente sección para obtener una lista completa de los tipos de eventos.
handler - Si se proporciona, identifica el oyente específico que se eliminará.

Tipos de eventos

Los siguientes son tipos de eventos recomendados y multiplataforma que puede vincular usando JQuery:

No Señor.	Tipo de evento y descripción
1	blur Ocurre cuando el elemento pierde el foco.
2	change Ocurre cuando cambia el elemento.
3	click Ocurre cuando se hace clic con el mouse.
4	dblclick Ocurre cuando un mouse hace doble clic.
5	error Ocurre cuando hay un error en la carga o descarga, etc.
6	focus Ocurre cuando el elemento se enfoca.
7	keydown Ocurre cuando se presiona la tecla.
8	keypress Ocurre cuando se presiona y se suelta la tecla.
9	keyup Ocurre cuando se suelta la tecla.
10	load Ocurre cuando se carga el documento.
11	mousedown Ocurre cuando se presiona el botón del mouse.
12	mouseenter Ocurre cuando el mouse entra en una región de elementos.
13	mouseleave Ocurre cuando el mouse sale de una región de elementos.
14	mousemove Ocurre cuando se mueve el puntero del mouse.
15	mouseout Ocurre cuando el puntero del mouse se mueve fuera de un elemento.
dieciséis	mouseover Ocurre cuando el puntero del mouse se mueve sobre un elemento.
17	mouseup Ocurre cuando se suelta el botón del mouse.
18	resize Ocurre cuando se cambia el tamaño de la ventana.
19	scroll Ocurre cuando se desplaza la ventana.
20	select Ocurre cuando se selecciona un texto.
21	submit Ocurre cuando se envía el formulario.
22	unload Ocurre cuando se descargan documentos.

El objeto de evento

La función de devolución de llamada toma un solo parámetro; cuando se llama al controlador, el objeto de evento de JavaScript se pasará a través de él.

El objeto de evento a menudo es innecesario y el parámetro se omite, ya que generalmente hay suficiente contexto disponible cuando el controlador está obligado a saber exactamente lo que se debe hacer cuando se activa el controlador, sin embargo, hay ciertos atributos a los que debe acceder.

Los atributos del evento

Las siguientes propiedades / atributos de eventos están disponibles y son seguros para acceder de manera independiente de la plataforma:

No Señor.	Descripción de propiedad
1	altKey Establézcalo en verdadero si se presionó la tecla Alt cuando se desencadenó el evento, falso en caso contrario. La tecla Alt está etiquetada como Opción en la mayoría de los teclados Mac.
2	ctrlKey Se establece en verdadero si se presionó la tecla Ctrl cuando se desencadenó el evento, falso en caso contrario.
3	data El valor, si lo hay, pasado como segundo parámetro al comando bind () cuando se estableció el controlador.
4	keyCode Para eventos de activación y desactivación de teclas, esto devuelve la tecla que se presionó.
5	metaKey Se establece en verdadero si se presionó la tecla Meta cuando se desencadenó el evento, falso si no. La tecla Meta es la tecla Ctrl en PC y la tecla Comando en Mac.
6	pageX Para eventos de mouse, especifica la coordenada horizontal del evento en relación con el origen de la página.
7	pageY Para eventos de mouse, especifica la coordenada vertical del evento relativa al origen de la página.
8	relatedTarget Para algunos eventos de mouse, identifica el elemento que el cursor dejó o ingresó cuando se disparó el evento.
9	screenX Para eventos de mouse, especifica la coordenada horizontal del evento relativa al origen de la pantalla.
10	screenY Para eventos de mouse, especifica la coordenada vertical del evento relativa al origen de la pantalla.
11	shiftKey Establézcalo en verdadero si se presionó la tecla Mayús cuando se activó el evento, falso en caso contrario.
12	target Identifica el elemento para el que se activó el evento.
13	timeStamp La marca de tiempo (en milisegundos) cuando se creó el evento.
14	type Para todos los eventos, especifica el tipo de evento que se activó (por ejemplo, clic).
15	which Para eventos de teclado, especifica el código numérico de la tecla que causó el evento, y para eventos de mouse, especifica qué botón se presionó (1 para la izquierda, 2 para el medio, 3 para la derecha).

<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>

Esto producirá el siguiente resultado:

Los métodos de eventos

Hay una lista de métodos que se pueden llamar en un objeto de evento:

No Señor.	Método y descripción
1	preventDefault () Evita que el navegador ejecute la acción predeterminada.
2	isDefaultPrevented () Devuelve si event.preventDefault () se llamó alguna vez en este objeto de evento.
3	stopPropagation () Detiene la propagación de un evento a los elementos principales, lo que evita que los controladores principales sean notificados del evento.
4	isPropagationStopped () Devuelve si event.stopPropagation () se llamó alguna vez en este objeto de evento.
5	stopImmediatePropagation () Detiene la ejecución del resto de controladores.
6	isImmediatePropagationStopped () Devuelve si event.stopImmediatePropagation () se llamó alguna vez en este objeto de evento.

Métodos de manipulación de eventos

La siguiente tabla enumera los métodos importantes relacionados con eventos:

No Señor.	Método y descripción
1	enlazar (tipo, [datos], fn) Vincula un controlador a uno o más eventos (como hacer clic) para cada elemento coincidente. También puede vincular eventos personalizados.
2	desactivado (eventos [, selector] [, controlador (eventObject)]) Esto hace lo contrario de en vivo, elimina un evento en vivo vinculado.
3	hover (encima, fuera) Simula desplazarse, por ejemplo, al mover el mouse dentro y fuera de un objeto.
4	en (eventos [, selector] [, datos], controlador) Vincula un controlador a un evento (como un clic) para todos los elementos coincidentes actuales y futuros. También puede vincular eventos personalizados.
5	uno (tipo, [datos], fn) Vincula un controlador a uno o más eventos para que se ejecuten una vez para cada elemento coincidente.
6	listo (fn) Vincula una función que se ejecutará cuando el DOM esté listo para ser atravesado y manipulado.
7	disparador (evento, [datos]) Active un evento en cada elemento coincidente.
8	triggerHandler (evento, [datos]) Activa todos los controladores de eventos enlazados en un elemento.
9	desvincular ([type], [fn]) Esto hace lo contrario de enlazar, elimina los eventos enlazados de cada uno de los elementos coincidentes.

Métodos de ayuda de eventos

jQuery también proporciona un conjunto de funciones auxiliares de eventos que se pueden usar para activar un evento para vincular cualquier tipo de evento mencionado anteriormente.

Métodos de activación

A continuación se muestra un ejemplo que desencadenaría el evento de desenfoque en todos los párrafos:

$("p").blur();

Métodos de encuadernación

A continuación se muestra un ejemplo que uniría click evento en todos los <div> -

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

Aquí hay una lista completa de todos los métodos de soporte proporcionados por jQuery:

No Señor.	Método y descripción
1	blur( ) Activa el evento de desenfoque de cada elemento coincidente.
2	blur( fn ) Vincula una función al evento de desenfoque de cada elemento coincidente.
3	change( ) Activa el evento de cambio de cada elemento coincidente.
4	change( fn ) Vincula una función al evento de cambio de cada elemento coincidente.
5	click( ) Activa el evento de clic de cada elemento coincidente.
6	click( fn ) Vincula una función al evento de clic de cada elemento coincidente.
7	dblclick( ) Activa el evento dblclick de cada elemento coincidente.
8	dblclick( fn ) Vincula una función al evento dblclick de cada elemento coincidente.
9	error( ) Activa el evento de error de cada elemento coincidente.
10	error( fn ) Vincula una función al evento de error de cada elemento coincidente.
11	focus( ) Activa el evento de enfoque de cada elemento coincidente.
12	focus( fn ) Vincula una función al evento de enfoque de cada elemento coincidente.
13	keydown( ) Activa el evento keydown de cada elemento coincidente.
14	keydown( fn ) Vincular una función al evento keydown de cada elemento coincidente.
15	keypress( ) Activa el evento de pulsación de tecla de cada elemento coincidente.
dieciséis	keypress( fn ) Vincula una función al evento de pulsación de tecla de cada elemento coincidente.
17	keyup( ) Activa el evento keyup de cada elemento coincidente.
18	keyup( fn ) Vincula una función al evento keyup de cada elemento coincidente.
19	load( fn ) Vincula una función al evento de carga de cada elemento coincidente.
20	mousedown( fn ) Vincula una función al evento mousedown de cada elemento coincidente.
21	mouseenter( fn ) Vincular una función al evento mouseenter de cada elemento coincidente.
22	mouseleave( fn ) Vincula una función al evento mouseleave de cada elemento coincidente.
23	mousemove( fn ) Vincula una función al evento mousemove de cada elemento coincidente.
24	mouseout( fn ) Vincula una función al evento mouseout de cada elemento coincidente.
25	mouseover( fn ) Vincula una función al evento de mouseover de cada elemento coincidente.
26	mouseup( fn ) Vincula una función al evento mouseup de cada elemento coincidente.
27	resize( fn ) Vincula una función al evento de cambio de tamaño de cada elemento coincidente.
28	scroll( fn ) Vincular una función al evento de desplazamiento de cada elemento coincidente.
29	select( ) Activa el evento de selección de cada elemento coincidente.
30	select( fn ) Vincula una función al evento de selección de cada elemento coincidente.
31	submit( ) Activa el evento de envío de cada elemento coincidente.
32	submit( fn ) Vincula una función al evento de envío de cada elemento coincidente.
33	unload( fn ) Vincula una función al evento de descarga de cada elemento coincidente.