Cualquier aplicación web moderna no puede ser concebida sin un evento asociado a ella. Los eventos son el mecanismo para construir una página web interactiva. jQuery es lo suficientemente inteligente como para manejar cualquier evento generado en una página HTML. Primero tratemos de entender qué es un evento.
¿Qué son los eventos de jQuery?
Un evento jQuery es el resultado de una acción que puede ser detectada por jQuery (JavaScript). Cuando estos eventos se activan, puedes utilizar una función personalizada para hacer prácticamente lo que quieras con el evento. Estas funciones personalizadas se llaman manejadores de eventos.
La librería jQuery proporciona métodos para gestionar todos los eventos del DOM y hace que el manejo completo de eventos sea considerablemente más fácil que lo que tenemos disponible en JavaScript.
A continuación, los ejemplos de algunos eventos comunes.
- Un clic del ratón
- La carga de una página web
- Pasar el ratón por encima de un elemento
- El envío de un formulario HTML
- Una pulsación del teclado, etc.
La siguiente tabla enumera algunos de los eventos importantes del DOM.
| Ratón | Teclado | Formulario | Documento |
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| hover | keyup | select | scroll |
| mousedown | blur | unload | |
| mouseup | focusin | ready |
Vincular eventos a elementos
Imagina una situación en la que deseas hacer clic en un div en un documento HTML y luego hacer alguna acción con este clic. Para lograr esto tendrás que enlazar un evento de click de jQuery con el elemento div y luego definir una acción para el evento de clic.
La siguiente es la sintaxis de jQuery para enlazar un evento de click con todos los elementos div disponibles en un documento HTML:
$("div").click();El siguiente paso es definir una acción contra el evento click. La siguiente es la sintaxis para definir una función que se ejecutará cuando se dispare el evento click. Esta función se llama jQuery Event Handler:
$("div").click(function(){
// Código de jQuery
});La siguiente es otra sintaxis para enlazar un evento de clic con cualquiera de los elementos del DOM usando bind:
$("div").bind('click', function(){
// Código de jQuery
});Ejemplos de eventos jQuery
Evento click
A continuación se muestra un ejemplo con bind para enlazar un evento de click con los div, donde se muestra un cuadro de alerta cada vez que se hace clic en cualquiera de los divs.
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").click(function(){
alert('Hola cari!');
});
});
</script>
</head>
<body>
<p>Haz clic en cualquiera de los divs para ver el resultado:</p>
<div>Uno</div>
<div>Dos</div>
<div>Tres</div>
</body>
</html>Evento dblclick
Reescribamos el código anterior para enlazar un evento dblclick con div en el que se muestra un cuadro de alerta cada vez que se hace doble clic en cualquiera de los divs.
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").dblclick(function(){
alert('Hola chiqui!');
});
});
</script>
</head>
<body>
<p>Haz clic en cualquiera de los divs para ver el resultado:</p>
<div>Uno</div>
<div>Dos</div>
<div>Tres</div>
</body>
</html>Evento mouseenter
Se activa cuando el mouse entra de un elemento.
A continuación se muestra un ejemplo para enlazar un evento mouseenter con un div en el que se muestra un cuadro de alerta cada vez que se pasa el cursor por encima de cualquiera de los divs.
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").mouseenter(function(){
alert('El cursor está dentro!');
});
});
</script>
</head>
<body>
<p>Situa el cursor sobre cualquiera de los divs para ver el resultado:</p>
<div>Uno</div>
<div>Dos</div>
<div>Tres</div>
</body>
</html>Evento mouseleave
Se activa cuando el mouse sale de un elemento.
A continuación se muestra un ejemplo para enlazar un evento mouseleave con un div donde se muestra una caja de alerta cada vez que se saca el cursor del div.
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").mouseleave(function(){
alert('El cursor está dentro!');
});
});
</script>
</head>
<body>
<p>Saca el cursor de cualquiera de los divs para ver el resultado:</p>
<div>Uno</div>
<div>Dos</div>
<div>Tres</div>
</body>
</html>Objeto de Evento jQuery
Cada vez que un evento jQuery se dispara, jQuery pasa un Objeto de Evento a cada función manejadora de eventos. El objeto de evento proporciona varias informaciones útiles sobre el evento.
El objeto de evento es a menudo innecesario y el parámetro es omitido, ya que normalmente se dispone de suficiente contexto cuando el manejador está vinculado para saber exactamente lo que hay que hacer cuando el manejador se dispara, sin embargo hay ciertos atributos a los que necesitaría acceder.
Las siguientes propiedades/atributos de eventos están disponibles y son de acceso seguro de manera independiente de la plataforma.
| Propiedad | Descripción |
|---|---|
| altKey | Se establece como true si la tecla Alt fue presionada cuando el evento fue disparado, false si no. La tecla Alt está etiquetada como Option en la mayoría de los teclados de Mac. |
| ctrlKey | Se establece como true si la tecla Ctrl fue presionada cuando el evento fue disparado, false si no. |
| data | El valor, si lo hay, pasado como segundo parámetro al comando bind() cuando se estableció el manejador. |
| keyCode | Para los eventos keyup y keydown, esto devuelve la tecla que fue presionada. |
| metaKey | Se establece como true si la tecla Meta fue presionada cuando el evento fue disparado, false si no. La tecla Meta es la tecla Ctrl en los PC y la tecla Comando en los Mac. |
| pageX | Para los eventos de ratón, especifica la coordenada horizontal del evento en relación con el origen de la página. |
| pageY | Para los eventos de ratón, especifica la coordenada vertical del evento en relación con el origen de la página. |
| relatedTarget | Para algunos eventos de ratón, identifica el elemento que el cursor dejó o entró cuando se disparó el evento. |
| screenX | Para los eventos de ratón, especifica la coordenada horizontal del evento en relación con el origen de la pantalla. |
| screenY | Para los eventos de ratón, especifica la coordenada vertical del evento en relación con el origen de la pantalla. |
| shiftKey | Se establece como true si la tecla Shift fue presionada cuando el evento fue disparado, false si no. |
| target | Identifica el elemento para el que se activó el evento. |
| timeStamp | El timestamp (en milisegundos) cuando se creó el evento. |
| type | Para todos los eventos, especifica el tipo de evento que se activó (por ejemplo, clic). |
| which | Para los eventos de teclado, especifica el código numérico de la tecla que causó el evento, y para los eventos de ratón, especifica qué botón se pulsó (1 para el izquierdo, 2 para el central, 3 para el derecho). |
Ejemplo
A continuación vemos un ejemplo para mostrar cómo diferentes clics dan diferentes coordenadas.
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").click(function(eventObj){
alert('Event type is ' + eventObj.type);
alert('pageX : ' + eventObj.pageX);
alert('pageY : ' + eventObj.pageY);
alert('Target : ' + eventObj.target.innerHTML);
});
});
</script>
<style>
div{
margin:10px;
padding:12px;
border:2px solid #666;
width:60px;
cursor:pointer
}
</style>
</head>
<body>
<p>Click en cualquier div para ver el resultado:</p>
<div>Uno</div>
<div>Dos</div>
<div>Tres</div>
</body>
</html>Palabra clave this en manejador de eventos
Muchas veces es muy fácil hacer uso de la palabra clave this dentro de un manejador de eventos. Esta palabra clave representa un elemento del DOM que desencadena el evento.
El siguiente ejemplo mostrará el contenido del div pulsado:
<!doctype html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("div").click(function(){
alert($(this).text());
});
});
</script>
<style>
div{
margin:10px;
padding:12px;
border:2px solid #666;
width:60px;
cursor:pointer
}
</style>
</head>
<body>
<p>Haz clic en cualquiera de los divs para ver el resultado:</p>
<div>Uno</div>
<div>Dos</div>
<div>Tres</div>
</body>
</html>Cómo eliminar los manejadores de eventos
Normalmente, una vez que se establece un manejador de eventos, éste permanece en efecto por el resto de la vida de la página. Puede existir la necesidad de eliminar un manejador de eventos.
jQuery proporciona el comando unbind() para eliminar un manejador de eventos que está saliendo. La sintaxis de unbind() es la siguiente.
selector.unbind(eventType, handler)
or
selector.unbind(eventType)A continuación se describen los parámetros:
- eventType – Una cadena que contiene un tipo de evento JavaScript, como click o submit. Consulte la siguiente sección para ver una lista completa de tipos de eventos.
- handler – Si se proporciona, identifica el oyente específico que se va a eliminar.