Manejo de oyentes de actividades de JavaScript con parámetros – Smash Magazine

Los oyentes de eventos de JavaScript son muy importantes porque existen en casi todas las aplicaciones web que requieren interactividad. Sin embargo, también es crucial manejarlos adecuadamente. Los oyentes de eventos administrados incorrectamente pueden conducir a fugas de memoria y, a veces, problemas de rendimiento en casos extremos.

Aquí está el verdadero problema: Agregar eventos JavaScript Los oyentes no suelen eliminarse. Y, al agregarlos, no requieren parámetros en la mayoría de los casos, a menos que en casos raros, esto los hace más complicados.

El escenario común en el que es posible que necesite usar los parámetros del controlador de eventos es que cuando tiene una lista de tareas dinámicas, cada tarea en la lista tiene un botón «Eliminar» conectado al controlador de eventos, que utiliza la ID de la tarea como parámetro para eliminar la tarea. En tales casos, es mejor una vez que se complete la tarea para asegurarse de que los elementos eliminados se puedan limpiar con éxito, que es un proceso llamado, y es una buena idea Basura recolectadaexistir.

Un error común al agregar oyentes de eventos

Un error muy común al agregar parámetros en un controlador de eventos es llamar a la función y usar sus parámetros dentro de él addEventListener() método. Esto es lo que quiero decir:

button.addEventListener('click', myFunction(param1, param2));

El navegador puede responder a esta línea llamando a la función de inmediato, independientemente de si ocurrió un evento de clic. En otras palabras, la función se llama inmediatamente en lugar de diferirse, por lo que cuando el evento de clic realmente ocurre, nunca se emitirá.

En algunos casos, también puede recibir el siguiente error de consola:

Este error tiene sentido porque addEventListener método Solo acepta Función javascript, una con handleEvent() Método o simple null. Una forma rápida y fácil de evitar este error es cambiarlo addEventListener Flecha o método de función anónima.

button.addEventListener('click', (event) => {
  myFunction(event, param1, param2); // Runs on click
});

El único IC que usa flechas y funciones anónimas es que no pueden usarse con tradicional removeEventListener() Método; Tendrás que usar AbortControllerpara casos simples, esto puede ser demasiado matador. AbortController Cuando tenga múltiples oyentes de eventos eliminados a la vez, brillará.

Para casos simples donde solo uno o dos oyentes de eventos pueden eliminar, removeEventListener() El método aún resulta útil. Sin embargo, para aprovecharlo, debe almacenar la funcionalidad como oyente de referencia.

Use parámetros con manejadores de eventos

Hay varias formas de incluir parámetros con controladores de eventos. Sin embargo, a los efectos de esta demostración, limitaremos el enfoque a los siguientes dos:

Opción 1: Flechas y características anónimas

Usar flechas y anonimato es la forma más rápida y fácil de hacer el trabajo.

Para agregar un controlador de eventos con parámetros usando flechas y funciones anónimas, primero debemos llamar a la función que crearemos en la función de flecha adjunta al oyente de eventos:

const button = document.querySelector("#myButton");

button.addEventListener("click", (event) => {
  handleClick(event, "hello", "world");
});

Después de eso, podemos usar la función de creación de parámetros:

function handleClick(event, param1, param2) {
  console.log(param1, param2, event.type, event.target);
}

Tenga en cuenta que con este método, la eliminación del oyente de eventos requiere AbortController. Para eliminar el oyente activo, creamos uno nuevo AbortController Objeto, luego recuperar AbortSignal Objetos de:

const controller = new AbortController();
const { signal } = controller;

A continuación, podemos signal De controller Como opción removeEventListener() método:

button.addEventListener("click", (event) => {
  handleClick(event, "hello", "world");
}, { signal });

Ahora podemos eliminar el oyente del evento llamando AbortController.abort():

controller.abort()

Opción 2: Cerrar

Cerrar en JavaScript es otra característica que puede ayudarnos a usar manejadores activos. ¿Recuerdas el error que generó el error de tipo? Este error también se puede corregir mediante el cierre. Específicamente, con el cierre, una función puede acceder a variables desde su alcance externo.

En otras palabras, en el controlador de eventos, podemos acceder a los parámetros requeridos desde una función externa:

function createHandler(message, number) {
  // Event handler
  return function (event) {
  console.log(`${message} ${number} - Clicked element:`, event.target);
    };
  }

  const button = document.querySelector("#myButton");
  button.addEventListener("click", createHandler("Hello, world!", 1));
}

Esto crea una función que devuelve otra función. Luego llame a la función creada el segundo parámetro en addEventListener() Los métodos hacen que la función interna regrese como controlador de eventos. Con la función cerrada, los parámetros de la función externa se utilizarán para la función interna.

Presta atención a cómo event Los objetos se pueden usar para funciones internas. Esto se debe a que la función interna está unida al controlador de eventos. El objeto de evento se pasa automáticamente a la función porque es un controlador de eventos.

Para eliminar el oyente activo, podemos usar AbortController Tal como solíamos hacerlo. Pero esta vez, veamos cómo usarlo removeEventListener() método.

para removeEventListener Métodos de trabajo, referencia createHandler Las funciones deben almacenarse y usarse addEventListener método:

function createHandler(message, number) {
  return function (event) {
    console.log(`${message} ${number} - Clicked element:`, event.target);
  };
}
const handler = createHandler("Hello, world!", 1);
button.addEventListener("click", handler);

Ahora, puede eliminar la audiencia activa así:

button.removeEventListener("click", handler);

en conclusión

Es mejor eliminar siempre al oyente del evento sin la necesidad de evitar fugas de memoria. La mayoría de las veces, los controladores de eventos no requieren parámetros; Sin embargo, en casos raros, lo hacen. Uso de características de JavaScript, como apagar, AbortControllery removeEventListenerEl uso de controladores de eventos para manejar los parámetros es posible y bien compatible.

(GG, YK)