¿Qué es un agente de escucha de eventos?
Un agente de escucha de eventos es una función de JavaScript que espera a que se produzca un evento y luego responde a él. JavaScript es un lenguaje de programación que los desarrolladores utilizan para hacer páginas web interactivas. La función de agente de escucha de eventos de JavaScript permite crear respuestas personalizadas a eventos como clics del ratón, clics del teclado y el cambio de tamaño de las ventanas. El paradigma de programación de esperar y responder a eventos en tiempo real se denomina gestión de eventos.
¿Cuál es la sintaxis de la función del agente de escucha de eventos?
La función del agente de escucha de eventos comparte características similares con otras funciones de JavaScript. Cuando se activa, realiza la acción necesaria para procesar el evento. Por ejemplo, la función del agente de escucha de eventos puede cambiar el texto mostrado, recoger información de formularios de registro o almacenar datos en bases de datos.
Sintaxis del agente de escucha de eventos
Una función de agente de escucha de eventos sigue una sintaxis JavaScript normal, como en el siguiente ejemplo.
function RespondMouseClick() {
document.getElementById("textdisplay1").innerHTML += "MouseClick happened" ;
}
Este ejemplo muestra la función del agente de escucha del evento RespondMouseClick. Es habitual escribir el nombre de la función para reflejar el propósito del agente de escucha de eventos. En la función, se escriben códigos para realizar acciones específicas cuando se produce el evento. En este ejemplo, la función añade el texto MouseClick happened al elemento HTML textdisplay1.
Sintaxis del gestor de eventos
Como alternativa, puede utilizar una función de gestión de eventos para responder al evento activado, como en el siguiente ejemplo.
function eventHandler(event) {
if (event.type === "fullscreenchange") {
console.log (“full screen toggle”);
} else {
console.log (“full screen error”);
}
}
Esto le permite gestionar varios tipos de eventos de un elemento específico con una sola función.
Por ejemplo, podría registrar un agente de escucha de eventos para gestionar todo tipo de eventos de blockchain en aplicaciones basadas en eventos. Para más información, lea sobre la creación de una aplicación basada en eventos con Amazon Managed Blockchain.
¿Cómo se añade un agente de escucha de eventos?
Un agente de escucha de eventos solo se activará después de añadirlo al elemento JavaScript correspondiente. Para ello, puede utilizar una sintaxis como esta:
- element.addEventListener(event, listener);
- element.addEventListener(event, listener, useCapture);
- element.addEventListener(event, listener, options);
Por ejemplo, los desarrolladores pueden invocar la siguiente función para vincular el agente de escucha de eventos de clic a un elemento de botón.
btn.addEventListener("click", RespondMouseClick);
También puede añadir múltiples agente de escucha de eventos a un objeto de evento específico sin sobrescribir los gestores de eventos existentes.
Por ejemplo, Amazon Web Services (AWS) permite a los desarrolladores encadenar múltiples respuestas a llamadas sobre el objeto AWS.Request. Para más información, lea cómo utilizar un agente de escucha de eventos de objetos de solicitud en AWS.
Parámetros para añadir eventos
Aquí hay una explicación de los parámetros en la sintaxis anterior:
- El parámetro event es cualquier evento JavaScript válido, como un clic, un cambio, un pase del ratón, una tecla pulsada y una carga.
- El parámetro listener es la llamada de respuesta al evento o función JavaScript creada para responder a eventos específicos.
- El parámetro useCapture es un parámetro opcional que indica el método de propagación de eventos. Acepta valores booleanos, donde true activa la captura mientras que false activa el burbujeo. El valor por defecto de este parámetro es false.
- El parámetro options consta de varios valores opcionales, entre ellos el modo de captura y las señales de rechazo, que representan los comportamientos del agente de escucha.
¿Cómo se elimina un agente de escucha de eventos?
Los agentes de escucha de eventos permanecen activos hasta que los elimine de los elementos JavaScript asociados. Para ello, puede utilizar la siguiente sintaxis.
element.removeEventListener(type, listener, useCapture);
Los parámetros de eliminación de los agentes de escucha de eventos son similares a los que se utilizan para añadirlos. Cuando elimine un agente de escucha de eventos, deberá especificar los mismos parámetros de type, listener, y useCapture. Si no lo hace, el agente de escucha de eventos permanecerá activo y seguirá activándose para futuros eventos.
Por ejemplo, puede añadir un evento con el siguiente código.
button.addEventListener("click", RespondMouseClick, true);
Pero aplicar el siguiente código no consigue eliminar el agente de escucha de eventos. Esto se debe a que el valor useCapture difiere del registrado con el objeto button.
button.removeEventListener("click", RespondMouseClick, false);
Para eliminar correctamente el evento y evitar que se active, puede utilizar el siguiente código.
button.removeEventListener("click", RespondMouseClick, true);
¿Cómo funcionan las funciones anidadas de los agentes de escucha de eventos?
Los agentes de escucha de eventos anidados son controladores de eventos que se añaden a elementos HTML de diferentes niveles jerárquicos.
En el siguiente ejemplo HTML, el documento es propietario del elemento primario subyacente, mientras que el primario es propietario del secundario.
<div class="document">
<div class="parent">
<div class="child"></div>
</div>
</div>
Las aplicaciones web complejas pueden tener varias capas primarias y secundarias con sus respectivas funciones de agente de escucha de eventos. Cuando se produce un evento concreto, se activan agentes de escucha de eventos en distintas capas en un orden determinado. Por ejemplo, hacer clic en un botón secundario propagará el evento a todos los controladores que capturen un clic del ratón.
Los eventos pueden propagarse de dos maneras: por burbujeo o por captura.
Burbujeo de eventos
El burbujeo es el modo predeterminado de gestión de eventos de JavaScript. Propaga el evento desde la capa más interna a la más externa.
Por ejemplo, un usuario podría pasar el ratón por encima de un cuadro de texto de la sección secundaria. A continuación, la aplicación podría transmitir el evento en el siguiente orden:
- El agente de escucha de eventos en el elemento secundario gestiona el evento que se activa al pasar el ratón por encima.
- A continuación, el agente de escucha de eventos principal procesa el evento y pasa el control al agente de escucha de eventos del documento.
Para configurar el burbujeo de eventos, utilice la siguiente sintaxis:
- element.addEventListener(event, listener, [false]);
- element.addEventListener(event, listener);
Captura de eventos
La captura de eventos es un modo especial de gestión de eventos en JavaScript en el que el evento se propaga hacia el interior desde la capa más externa. Una vez que el evento llega al elemento de destino en la capa interna, el modo de gestión de eventos cambia a burbujeo. A continuación, el burbujeo propaga el suceso hacia la capa superior.
Por ejemplo, un usuario podría hacer clic en un botón secundario e iniciar la siguiente secuencia:
- El agente de escucha de eventos del documento procesa el evento que se activa al hacer clic con el ratón, seguido por el controlador de eventos primario.
- El evento llega al elemento de destino, que es el botón. El agente de escucha de eventos del botón procesa el evento.
- La gestión de eventos pasa del modo de captura al de burbujeo.
- El mismo evento de clic del ratón activa el gestor de eventos en el primario antes de terminar en el documento.
Cómo elegir entre el burbujeo y la captura
El burbujeo y la captura permiten gestionar los eventos de manera distinta. El burbujeo rara vez se utiliza, ya que la captura es suficiente para gestionar la mayoría de los eventos en las aplicaciones.
Cuando tenga que decidir entre burbujear y capturar, deberá tener en cuenta el flujo de propagación de eventos y cómo se alinea con la lógica de programación de su aplicación.
Por ejemplo, considere un formulario primario que consta de dos elementos secundarios. El primer elemento requiere una actualización inmediata cuando se produce un evento en el segundo elemento. En este caso, hay que utilizar el modo de captura. Garantiza que el agente de escucha de eventos primario procese el evento y actualice el primer elemento. A continuación, pasa el control al agente de escucha de eventos en el segundo elemento secundario.
¿Cómo se detiene la propagación de eventos en funciones anidadas de agentes de escucha de eventos?
Los eventos se propagan hasta llegar al destino final en una disposición de agente de escucha anidada. Hay que utilizar métodos específicos para impedir que el evento siga propagándose.
El siguiente método detiene el evento en el agente de escucha de eventos.
event.stopPropagation();
Por ejemplo, si se invoca StopPropagation en el botón secundario, la acción de hacer clic con el ratón no se propagará a los niveles principal y de documento. Por lo tanto, los agentes de escucha de eventos del nivel superior no se activarán.
Detener toda propagación de eventos
StopPropagation solo detiene la propagación del evento del tipo actual. Si el objeto tiene diferentes tipos de agentes de escucha de eventos registrados, estos seguirán activándose a pesar de haber activado StopPropagation.
Para detener todos los eventos relacionados con un objeto específico, puede utilizar el método StopImmediatePropagation, como se indica a continuación.
event.stopImmediatePropagation();
Cuando un agente de escucha de eventos invoca StopImmediatePropagation, no se activa ningún otro agente de escucha de eventos asociado al objeto.
¿Cómo puede AWS satisfacer sus requisitos de JavaScript?
Amazon Web Services (AWS) ofrece AWS SDK para JavaScript para que pueda utilizar servicios en sus aplicaciones con bibliotecas y API fácilmente.
Puede utilizar el SDK para desarrollar aplicaciones de servidor, web y web móvil. El SDK es compatible con el tiempo de ejecución de JavaScript, Node.JS y React Native, así como con la versión ejecutable entre dispositivos. Esto permite a los desarrolladores ejecutar el mismo paquete de servicios para clientes en distintas plataformas.
Otras ventajas de usar el SDK:
- El SDK está desarrollado en TypeScript. Esto ofrece ventajas como la comprobación estática de tipos y la compatibilidad con clases y módulos.
- El SDK ofrece una pila de middleware que permite introducir acciones personalizadas.
- El SDK tiene una arquitectura modular. Esto le permite utilizar solo los paquetes necesarios para optimizar el rendimiento de la aplicación.
Comience a utilizar aplicaciones JavaScript registrándose en una cuenta de AWS hoy mismo.
Siguientes pasos en AWS
Obtenga acceso instantáneo al nivel Gratuito de AWS.
Comience a crear en la consola de administración de AWS.