Administración de eventos con jQuery.

JQuery tiene también sus métodos para detectar los eventos. Estos se incluyen siempre en el lenguaje javascript. La mayoría de estos métodos se escriben igual que en javascript, pero sin el prefijo "on", por ejemplo onclick se convierte en .click()

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.

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.
mouseenter() 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>
Ver ejemplo anterior

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