Conceptos básicos de jQuery Event

Introducción

Bienvenido a la documentación de jQuery. Esta práctica te dará una introducción al Evento de jQuery.

jQuery proporciona métodos simples para adjuntar manejadores de eventos a selecciones. Cuando se produce un evento, la función proporcionada se ejecuta. Dentro de la función, this se refiere al elemento DOM que inició el evento.

La función de manejo de eventos puede recibir un objeto de evento. Este objeto se puede utilizar para determinar la naturaleza del evento y para evitar el comportamiento predeterminado del evento.

Skills Graph

Configuración de respuestas a eventos en elementos DOM

index.html ya se ha proporcionado en la máquina virtual.

jQuery hace que sea sencillo configurar respuestas basadas en eventos en los elementos de la página. Estos eventos a menudo se desencadenan por la interacción del usuario final con la página, como cuando se escribe texto en un elemento de formulario o cuando se mueve el puntero del mouse. En algunos casos, como los eventos de carga y descarga de la página, el navegador mismo desencadenará el evento.

jQuery ofrece métodos de conveniencia para la mayoría de los eventos nativos del navegador. Estos métodos, que incluyen .click(), .focus(), .blur(), .change(), etc., son un atajo para el método .on() de jQuery. El método on es útil para enlazar la misma función de controlador a múltiples eventos, cuando se desea proporcionar datos a la función de controlador de eventos, cuando se está trabajando con eventos personalizados o cuando se desea pasar un objeto de múltiples eventos y controladores.

// Configuración de evento utilizando un método de conveniencia
$("p").click(function () {
  console.log("You clicked a paragraph!");
});

// Configuración de evento equivalente utilizando el método `.on()`
$("p").on("click", function () {
  console.log("click");
});

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Extendiendo eventos a nuevos elementos de página

Es importante tener en cuenta que .on() solo puede crear oyentes de eventos en elementos que existan en el momento en que se configuran los oyentes. Por ejemplo:

$(document).ready(function () {
  // Ahora crea un nuevo elemento de botón con la clase alert.
  $("<button class='alert'>Alert!</button>").appendTo(document.body);
  // Configura el comportamiento de clic en todos los elementos de botón con la clase alert
  // que existan en el DOM cuando se ejecuta la instrucción
  $("button.alert").on("click", function () {
    console.log("A button with the alert class was clicked!");
  });
});

Si se crean elementos similares después de configurar los oyentes de eventos, no recogerán automáticamente los comportamientos de eventos que hayas configurado previamente.

Puede actualizar la pestaña Web 8080 para previsualizar la página web.

Configuración de múltiples respuestas a eventos

Con frecuencia, los elementos de su aplicación se vincularán a múltiples eventos. Si múltiples eventos deben compartir la misma función de manejo, puede proporcionar los tipos de evento como una lista separada por espacios a .on():

// Múltiples eventos, misma función de manejo
$("div").on(
  "click change", // Vincula manejadores para múltiples eventos
  function () {
    console.log("An input was clicked or changed!");
  }
);

Cuando cada evento tiene su propio manejador, puede pasar un objeto a .on() con uno o más pares clave/valor, donde la clave es el nombre del evento y el valor es la función para manejar el evento.

// Vinculación de múltiples eventos con manejadores diferentes
$("div").on({
  click: function () {
    console.log("clicked!");
  },
  mouseover: function () {
    console.log("hovered!");
  }
});

Puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicitaciones! Has completado la práctica de los conceptos básicos de jQuery Event. Para aprender más sobre la API de jQuery, consulta la documentación oficial de jQuery.