 |
Administración de eventos con jQuery.
Métodos de eventos de jQuery
Los métodos de eventos activan o adjuntan una función a un controlador de eventos para los elementos seleccionados. La siguiente tabla enumera todos los métodos de jQuery utilizados para manejar eventos.
| Metodo | Descripción |
| blur() | Adjunta / activa el evento de desenfoque blur |
| change() | Adjunta / activa el evento de cambio change |
| click() | Adjunta / activa el evento de click |
| dblclick() | Adjunta / activa el evento de click |
| event.currentTarget | El elemento DOM actual dentro de la fase de propagación del evento |
| event.data | Contiene los datos opcionales que se pasan a un método de evento cuando el controlador de ejecución está vinculado |
| event.delegateTarget | Devuelve el elemento donde se adjuntó el controlador de eventos jQuery actualmente llamado |
| event.isDefaultPrevented() | Devuelve si se llamó a event.preventDefault () para el objeto de evento |
| event.isImmediatePropagationStopped() | Devuelve si se llamó a event.stopImmediatePropagation () para el objeto de evento |
| event.isPropagationStopped() | Devuelve si se llamó a event.stopPropagation () para el objeto de evento |
| event.namespace | Devuelve el espacio de nombres especificado cuando se activó el evento. |
| event.pageX | Devuelve la posición del mouse relativa al borde izquierdo del documento |
| event.pageY | Devuelve la posición del mouse relativa al borde superior del documento. |
| event.preventDefault() | Evita la acción predeterminada del evento. |
| event.relatedTarget | Devuelve qué elemento ingresa o sale con el movimiento del mouse. |
| event.result | Contiene el último valor / anterior devuelto por un controlador de eventos desencadenado por el evento especificado. |
| event.stopImmediatePropagation() | Evita que se llame a otros controladores de eventos |
| event.stopPropagation() | Evita que el evento aumente el árbol DOM, lo que evita que los controladores principales sean notificados del evento. |
| event.target | Devuelve qué elemento DOM desencadenó el evento. |
| event.timeStamp | Devuelve el número de milisegundos desde el 1 de enero de 1970, cuando se activa el evento event.type, |
| event.type | Devuelve qué tipo de evento se activó. |
| event.which | Devuelve qué tecla del teclado o botón del mouse se presionó para el evento. |
| focus() | Adjunta / activa el evento de enfoque |
| focusin() | Adjunta un controlador de eventos al evento focusin |
| focusout() | Adjunta un controlador de eventos al evento focusout |
| hover() | Adjunta dos controladores de eventos al evento de desplazamiento |
| keydown() | Adjunta / activa el evento keydown |
| keypress() | Adjunta / activa el evento keypress |
| keyup() | Adjunta / activa el evento keyup |
| mousedown() | Adjunta / activa el evento mousedown. |
| Adjunta / activa el evento mouseenter. | |
| mouseleave() | Adjunta / activa el evento mouseleave. |
| mousemove() | Adjunta / activa el evento mousemove. |
| mouseout() | Adjunta / activa el evento mouseout. |
| mouseover() | Adjunta / activa el evento mouseover. |
| mouseup() | Adjunta / activa el evento mouseup. |
| off() | Elimina los controladores de eventos adjuntos con el método on(). |
| on() | Adjunta controladores de eventos a elementos. |
| one() | Agrega uno o más controladores de eventos a los elementos seleccionados. Este controlador solo se puede activar una vez por elemento. |
| $.proxy() | Toma una función existente y devuelve una nueva con un contexto particular |
| ready() | Especifica una función para ejecutar cuando el DOM está completamente cargado |
| resize() | Adjunta / Activa el evento de cambio de tamaño |
| scroll() | Adjunta / activa el evento de desplazamiento |
| select() | Adjunta / activa el evento seleccionado |
| submit() | Adjunta / activa el evento de envío |
| trigger() | Activa todos los eventos vinculados a los elementos seleccionados |
| triggerHandler() | Activa todas las funciones vinculadas a un evento específico para los elementos seleccionados |
jQuery facilita la administración de eventos de JavaScript y lo más importante nos hace transparente la diferencia en la registración de eventos entre distintos navegadores (IExplorer, FireFox, Chrome, Safari, Opera)
En este artículo ya hemos utilizado el manejador de eventos:
$(documento).ready(nombre de función)
Dijimos que este función que registramos mediante el método ready se ejecuta cuando el DOM del documento está en memoria. Si no utilizamos la librería jQuery hacemos esto a través del evento addEventListener.
Otro evento que vimos en conceptos anteriores es el click de un elemento, la sintaxis utilizada:
var x;
x=$("button");
x.click(presionBoton)
Con este pequeño código registramos la función presionBoton para todos los elementos de tipo button del documento.
Con este otro código:
var x;
x=$("#boton1");
x.click(presionBoton)
solo se registra para el elemento con id con valor "boton1".
Por último con este código se registra para todos los elementos "button" que dependen del div con valor de id igual a "formulario1":
var x;
x=$("#formulario1 button");
x.click(presionBoton)
Para reafirmar estos conceptos confeccionaremos una página que muestre un párrafo, luego una tabla que contenga dos párrafos y por último otra tabla que contenga dos párrafos. Capturaremos el evento click de todos los párrafos del documento y mostraremos un mensaje indicando:'se presionó un párrafo del documento', también capturaremos el evento click de los dos párrafos de la segunda tabla y mostraremos: 'se presionó un párrafo contenido en la segunda tabla.'.
pagina1.html
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<meta charset="UTF-8">
</head>
<body>
<p>Párrafo fuera de la tabla</p>
<table border="1">
<tr>
<td>
<p>Párrafo dentro de la primer tabla.</p>
</td>
<td>
<p>Párrafo dentro de la primer tabla.</p>
</td>
</tr>
</table>
<br>
<table border="1" id="tabla2">
<tr>
<td>
<p>Párrafo dentro de la segunda tabla.</p>
</td>
<td>
<p>Párrafo dentro de la segunda tabla.</p>
</td>
</tr>
</table>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="func5.js"></script>
</body>
</html>
func5.js
let x = $(document);
x.ready(inicializarEventos);
function inicializarEventos() {
let x = $("p");
x.click(presionParrafoDocumento);
x = $("#tabla2 p");
x.click(presionpresionParrafoSegundaTabla);
}
function presionParrafoDocumento() {
alert('se presionó un párrafo del documento');
}
function presionpresionParrafoSegundaTabla() {
alert('se presionó un párrafo contenido en la segunda tabla.');
}
El siguiente código asocia a cada elemento de tipo "p" (párrafo del documento) la función 'presionParrafoDocumento':
let x = $("p");
x.click(presionParrafoDocumento);
Luego cuando ejecutemos este documento cada vez que presionemos un párrafo de la página mostrará el mensaje 'se presionó un párrafo del documento'.
También asociamos otra función para el evento click de los párrafos contenidos dentro de la segunda tabla:
x = $("#tabla2 p");
x.click(presionpresionParrafoSegundaTabla);
Esto significa que los párrafos contenidos en la segunda tabla tienen asociados dos funciones para el evento click, luego cuando presionemos alguno de los párrafos de la segunda tabla aparecerán los dos mensajes: 'se presionó un párrafo del documento' y 'se presionó un párrafo contenido en la segunda tabla.'