2

nuevamente me encuentro con dudas con respecto a javascript, pues estoy haciendo un calendario y surgen cosas. Mi principal problema es como puedo añadir y eliminar EventListeners que llamen a funciones con parámetros.

function addDateWithADay(day){
      ...
}

Teniendo esa funcion Para añadirle un addEventListener a un boton que la llame (y le ingrese un parámetro), me di cuenta que no podia hacer esto

botonAbrirFechaConDia.addEventListener("click", addDateWithADay(5));

La unica solucion que encontre en internet para añadir EventListeners a funciones con parámetros es usando funciones anónimas. Asi:

botonAbrirFechaConDia.addEventListener("click", function() {
    addDateWithADay(5);
});

Pero quiero saber como puedo eliminar ese event listener despues? No me deja hacer esto:

botonAbrirFechaConDia.removeEventListener("click", function() {
        addDateWithADay(5);
    });

Y como ya me dijeron que no se puede remover con funciones anonimas, no se que me pueda ayudar a solucionar mi problema :(

Repito: En sí, lo que quiero es saber como puedo crear un EventListener para llamar a una funcion con parámetros, y despues eliminar ese mismo event Listener.

Tambien me falto especificar, que el parámetro 5, lo puse como ejemplo, pues, para no revolver mucho el asunto, todo esto del eventlistener lo quiero poner dentro de una funcion. Pues en javascript tengo un codigo que me genera los 30 dias del mes. Cada dia se genera con un for así: --------------ACTUALIZACION----------

function MainMenu(){
// En mi menu principal de mi calendario, reproduzco todos los días, los cuales tienen la 
//funcion de que si le doy click a cada uno, me abre su menu

for(let i=1; i<=getTotalDays(month); i++){
<div class="calendar__date calendar__item " onclick='openDayMenu(${i})'>
}

}

function openDayMenu(day){

 // aqui es donde quiero hacer todo... Supongamos que esto es un menu secundario 
//que se abre al darle click a algun dia

botonAbrirFechaConDia.addEventListener("click", function() {
    addDateWithADay(day);
});   
// Estando en este menu secundario, aparece este boton que puede llevarnos a otro menu
// (uno terciario, por asi decirlo)

botonRegresar.addEventListener("click", backToMainMenu);
// Este boton seria si quiero regresar al menu PRINCIPAL

}

function backToMainMenu ()
// Esta funcion sería hecha para que si quiero regresar del menu secundario al principal
//, me quite el boton generado y me regrese al menu principal

botonAbrirFechaConDia.removeEventListener("click", function() {
    addDateWithADay(day);
});   
mainMenu;

{

por lo que cada dia, tiene listener para que al darle click me abra su menu, donde le paso el i, que es el valor de su dia.

Entonces, relativo a mi pregunta de arriba. La variable day para generar el addEventListener de la funcion, pertenecería al de la funcion en la que estoy trabajando.

5
  • No puedes eliminar eventos definidos con funciones anónimas y, si incluyes paréntesis, la función se ejecuta inmediatamente, sin asignarse al evento. Por favor edita la pregunta para explicar de dónde sale ese parámetro para poder sugerirte alguna solución.
    – Triby
    el 23 jul. 2021 a las 0:14
  • Hola, lo que pasa es que precisamente no conozco mucho de como funciona eso. Yo lo unico que quize hacer es hacer dos botones, uno me ejecute la funcion 1 (addDate) y el otro la funcion 2 (addDateWithADay), solo que como explique, el segundo no me servia hasta que hice eso de la funcion anonima. Lo unico que quiero saber es como poder añadir/eliminar un eventlistener que ejecute una funcion con parámetros. Es todo amigo :( Por ahi lei que es con una arrow function pero no entiendo muy bien el 23 jul. 2021 a las 0:21
  • No se si con lo que ahora especifiqué, entiendas más que es lo que quiero hacer. Disculpa si no me se explicar, es que me desespera mucho no poder hacer algo tan simple. Como dije Lo unico que quiero saber es como poder añadir y eliminar un eventlistener que ejecute una funcion con parámetros. el 23 jul. 2021 a las 0:51
  • Dentro de la misma función openDayMenu() estás asignando y eliminando el evento. Eso no tiene sentido, porque será solo una fracción de segundo lo que estará disponible el evento. Por favor edita la pregunta para explicar exactamente lo que quieres hacer, con código incluido, tratando de crear un ejemplo mínimo y verificable; de lo contrario, solo vamos a estar adivinando.
    – Triby
    el 23 jul. 2021 a las 19:44
  • Si disculpa, es que no pensé muy correcto poner ya todo mi código, si no pensé que lo simple seria preguntar el como puedo añadir y remover el listener. Ahi ya especifiqué la estructura de como es mi código, y es que en sí, lo que hago es que creo menús, y mi problema es con los botones de abrir y regresar, de cuando estas en un menu secundario, los botones se conviertan para abrir uno terciario, pero que si no, regresen a como estaban, etc etc. En ese caso del calendario, el problema es que llevo la variable día cada vez que entro a algun dia mediante el onclick. el 23 jul. 2021 a las 20:34

2 respuestas 2

3

Lo que se me ocurre es crear un prototipo similar a addEventListener, lo que hace es recoger la función callback y guardarla dentro de la instancia del elemento actual, pues al crear una nueva función callback, se pierde la entidad de la anterior y JavaScript los considera elementos diferentes. En cambio, con este método, se recoge la función callback y se la almacena, para cuando se necesite detener el eventListener se usará la misma función callback con la que se creó, por lo que JavaScript si parará de escuchar el evento.

Element.prototype.listenFor = function(name, callback) {
  // Añadir prototipo listenFor
  this.listenerCallback = callback;
  // Almacenar la función callback en el objeto del elemento
  // Nos servirá para parar el eventListener
  this.addEventListener(name, callback);
  // Añadir el eventListener
}

Element.prototype.stopListen = function(name) {
  this.removeEventListener(name, this.listenerCallback);
  // Recoger la función callback y parar el eventListener
}

function test(n) {
  console.log(n);
}

document.querySelector("#test").listenFor("click", () => {
  test(24);
});

document.querySelector("#stop").listenFor("click", () => {
  document.querySelector("#test").stopListen("click");
});
<button id="test">Click</button>
<button id="stop">Stop listen</button>

3
  • Hola mucho Gusto, y de antemano agradezco infinitamente tu apoyo. Voy a probar a hacer lo que me recomiendas. Pero quisiera preguntarte sí esa es la manera en la que se "debe hacer", pues se me hace algo realmente confuso de javascript lo facil que es crear un EventListener con una funcion usando el add y despues eliminar ese mismo EventListener usando el remove . Pero no entiendo que si quieres hacer lo mismo con una funcion que requiera un parametro, se complique tanto que necesites hacer algo así, que cambia totalmente el código. Agradezco igualmente la ayuda y lo intentaré hacer así. el 23 jul. 2021 a las 1:39
  • @RodrigoJurado Si tu función siempre recibiría como único parámetro 5, deberías crear una función callback que llame a tu otra función, así sería más fácil añadir y remover el eventListener, en cambio deberías usar este método si tu función va a recibir como parámetro más valores que el 5 que nuestras acá. el 23 jul. 2021 a las 2:05
  • 1
    Interesante propuesta, me gustó.
    – Triby
    el 23 jul. 2021 a las 14:54
1

No puedes eliminar un evento asignado con función anónima y el único parámetro que puede recibir la función con nombre es el evento; pero siempre hay opciones para lograr lo que deseas.

Una forma sencilla es agregar al botón un atributo de datos que será de donde tomes el parámetro necesario, desde el evento.

let agregarDias = document.querySelector('#agregar-dias'),
    noEventos = document.querySelector('#no-events');

// Función para agregar días, recibe el evento como parámetro
function abrirConDia(e) {
    // e.currentTarget es el botón y se accede a los días con dataset.dias
    // Si vas a hacer operaciones, es recomendable convertir a entero
    let dias = parseInt(e.currentTarget.dataset.dias);
    console.log(dias);
}

// Función para eliminar eventos de ambos botones
function eliminarEventos() {
    agregarDias.removeEventListener('click', abrirConDia);
    noEventos.removeEventListener('click', eliminarEventos);
}

// Asignar eventos a botones
agregarDias.addEventListener('click', abrirConDia);
noEventos.addEventListener('click', eliminarEventos);
<button id="agregar-dias" data-dias="5">Agregar 5 días</button>
<button id="no-events">Eliminar eventos</button>

De esta forma, podrías tener varios botones con diferente atributo de datos para usar como parámetro o modificarlo, aunque, de ser el caso, lo más usual es tener un campo (input) para obtener el valor deseado.

Precisamente por eso te preguntaba de dónde obtienes el valor que deseas enviar como parámetro.

2
  • Hola muchas gracias por tu respuesta, y creo que esto se asemeja más a lo que yo buscaba. Efectivamente olvidé especificar de donde obtengo el valor días. Y es que mas bien es una variable let dias. Tengo un codigo que me genera los dias del mes en javascript, y cada dia se genera en un innerHTML con un onclick a una funcion openDayMenu(day), por lo que dentro de esa funcion, yo ya traigo la variable day como variable local (sí es que se puede ver así). No se como podria cambiar en el codigo para que los dias se ingresen de una variable que ya existe, y no que vengan del boton. el 23 jul. 2021 a las 17:47
  • Nuevamente añadí más informacion sobre lo que estoy queriendo hacer, y me disculpo por no saber explicarme. Agradezco ya con lo que me has aportado hasta ahorita el 23 jul. 2021 a las 18:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.