¿Cómo pasar argumentos a la función de escucha addEventListener?

5 minutos de lectura

¿Como pasar argumentos a la funcion de escucha addEventListener
Abhishek Yadav

La situación es un poco como-

var someVar = some_other_function();
someObj.addEventListener("click", function(){
    some_function(someVar);
}, false);

El problema es que el valor de someVar no es visible dentro de la función de escucha del addEventListenerdonde probablemente se trate como una nueva variable.

  • Un artículo muy claro al respecto: toddmotto.com/evitando-las-funciones-de-javascript-anónimos

    – Aurelio

    28 mayo 2014 a las 14:57

  • No es la forma más limpia, pero hace el trabajo. Tenga en cuenta que si someVar solo puede ser un dígito o texto: eval(‘someObj.addEventListener(“click”,function(){some_function(‘+someVar+’);});’);

    – Ignacio2526

    27 de junio de 2014 a las 16:37


  • Acabo de tener este problema hoy: la solución que se proporciona aquí es correcta (otras soluciones tienen problemas como un problema de bucle, etc.) – stackoverflow.com/a/54731362/984471

    – Manohar Reddy Poreddy

    20 oct 2019 a las 5:00

1646968868 179 ¿Como pasar argumentos a la funcion de escucha addEventListener
sergey ilinski

No hay absolutamente nada de malo en el código que has escrito. Ambas cosas some_function y someVar deben ser accesibles, en caso de que estuvieran disponibles en el contexto donde anónimo

function() { some_function(someVar); } 

fue creado.

Verifique si la alerta le brinda el valor que ha estado buscando, asegúrese de que sea accesible en el ámbito de la función anónima (a menos que tenga más código que opere en el mismo someVar variable junto a la llamada a addEventListener)

var someVar; 
someVar = some_other_function();
alert(someVar);
someObj.addEventListener("click", function(){
    some_function(someVar);
}, false);

  • Esto no funciona en bucle for. Siempre obtengo el último valor y no el que pertenecía a esa iteración. ¿Alguna solución?

    – iMatoria

    25 de junio de 2011 a las 17:19

  • ¿Alguien sabe por qué no funciona en bucle? ¿A qué se debe ese comportamiento?

    – Morfidón

    15 de mayo de 2015 a las 1:23

  • @Morfidon: en un ciclo, el valor de someVar no es el valor que tenía cuando se agregó el oyente, sino el valor que tiene cuando se ejecuta el oyente. Cuando se ejecuta el oyente, el bucle ya ha finalizado, por lo que el valor de someVar será el valor que tenía cuando finalizó el bucle.

    – www.admiraalit.nl

    29/10/2015 a las 16:45

  • Esta no es la respuesta correcta porque no nos permite usar la función ‘removeEventListener’ después.

    – usuario5260143

    4 de diciembre de 2016 a las 12:52

  • @iMatoria Acabo de descubrir que crear un bound function utilizando el .bind() El método resolverá el problema con bucles. desarrollador.mozilla.org/en/docs/Web/JavaScript/Reference/…

    – Luke T O’Brien

    22 de junio de 2017 a las 9:46

  • Función.prototipo.bind() es realmente la mejor manera de resolver este problema. Además, funciona intuitivamente dentro de los bucles: obtienes el alcance léxico que deseas. Sin funciones anónimas, IIFEo propiedades especiales agregadas a los objetos.

    –Clint Pachl

    11 de marzo de 2018 a las 10:14


  • Vea los pros y contras de IIFE vs bind().

    –Clint Pachl

    11 de marzo de 2018 a las 10:17

  • Mediante el uso Function.prototype.bind() no puedes eliminar el detector de eventoses mejor usar una función de curry en su lugar (vea la respuesta de @ tomcek112)

    – por favor

    17 sep 2019 a las 16:01

  • NOTA: some_other_func es una variable, puede pasar cualquier valor que desee some_func.

    – hitautodestruct

    7 de enero de 2020 a las 19:41


¿Como pasar argumentos a la funcion de escucha addEventListener
tomcek112

Una pregunta bastante antigua, pero tuve el mismo problema hoy. La solución más limpia que encontré es usar el concepto de zurra.

El código para eso:

someObj.addEventListener('click', some_function(someVar));

var some_function = function(someVar) {
    return function curried_func(e) {
        // do something here
    }
}

Al nombrar la función curry, le permite llamar a Object.removeEventListener para anular el registro de eventListener en un momento de ejecución posterior.

  • Me alegra encontrar esta respuesta que mencione la función curry. Sin embargo, ¿cómo eliminarías el detector de eventos?

    – Beto

    24/09/2017 a las 15:43

  • Impresionante ver buena terminología. Debería poder eliminar el detector de eventos nombrando la función curry. Voy a proponer una edición.

    – Mateo Brent

    1 mayo 2018 a las 15:16

  • Esta respuesta registrará la función tantas veces como se llame a addEventListener, ya que some_function (var) devuelve una función recién creada cada vez.

    – Yahia

    25 de junio de 2019 a las 7:27

  • No me gusta la idea de tener que nombrar la función curry para eliminar el oyente porque entonces estás tratando con 2 espacios de nombres diferentes de los que tienes que hacer un seguimiento.

    – chico mayor

    19 de noviembre de 2019 a las 0:24

  • @ martin36 observe la estructura duradera, tiene un currying function y un curried function. Debe agregar y eliminar la función de curry como oyente de eventos. en el ejemplo de @ tomeck112, eso es some_function

    –Guga Figueiredo

    10 de abril de 2021 a las 12:20

Simplemente puede vincular todos los argumentos necesarios con ‘bind’:

root.addEventListener('click', myPrettyHandler.bind(null, event, arg1, ... ));

De esta forma siempre obtendrás la event, arg1y otras cosas pasadas a myPrettyHandler.

http://passy.svbtle.com/aplicación-parcial-en-javascript-usando-bind

  • Me alegra encontrar esta respuesta que mencione la función curry. Sin embargo, ¿cómo eliminarías el detector de eventos?

    – Beto

    24/09/2017 a las 15:43

  • Impresionante ver buena terminología. Debería poder eliminar el detector de eventos nombrando la función curry. Voy a proponer una edición.

    – Mateo Brent

    1 mayo 2018 a las 15:16

  • Esta respuesta registrará la función tantas veces como se llame a addEventListener, ya que some_function (var) devuelve una función recién creada cada vez.

    – Yahia

    25 de junio de 2019 a las 7:27

  • No me gusta la idea de tener que nombrar la función curry para eliminar el oyente porque entonces estás tratando con 2 espacios de nombres diferentes de los que tienes que hacer un seguimiento.

    – chico mayor

    19 de noviembre de 2019 a las 0:24

  • @ martin36 observe la estructura duradera, tiene un currying function y un curried function. Debe agregar y eliminar la función de curry como oyente de eventos. en el ejemplo de @ tomeck112, eso es some_function

    –Guga Figueiredo

    10 de abril de 2021 a las 12:20

1646968869 883 ¿Como pasar argumentos a la funcion de escucha addEventListener
BBog

Puede agregar y eliminar detectores de eventos con argumentos declarando una función como una variable.

myaudio.addEventListener('ended',funcName=function(){newSrc(myaudio)},false);

newSrc es el método con myaudio como parámetro
funcName es la variable de nombre de función

Puede eliminar el oyente con
myaudio.removeEventListener('ended',func,false);

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad