2

Realizo unas pruebas y noto que addEventListener no funciona con mis arrow-function pero si con una estructura function convencional, el orden es el mismo pero solo corre la estructura function.

Por ejemplo esto funciona:

    
document.addEventListener("DOMContentLoaded",prueba,false);

function prueba() {
  alert("prueba ok");
}

Pero esto no:

    
document.addEventListener("DOMContentLoaded",prueba,false);

prueba = () => {
  alert("prueba ok");
}

Alguien sabe a que se debo esto?

1
  • Bienvenido a Stack Overflow en español. Hay un detalle de declaración de variables que puede provocar el fallo.
    – quevedo
    Commented el 18 dic. 2020 a las 3:53

1 respuesta 1

3

El principal error que tienes es que prueba no esta definida por lo tanto no le puedes asignar una funcion, esto se soluciona declarando a prueba como una variable con alguna de las siguientes palabras reservada const, let o var (si quieres puedes ver las diferencias entre estas 3 aquí).

const prueba = () => {
  alert("prueba ok");
}

Y el segundo error que en JavaScript no se puede acceder a las variables antes de su inicialización (esto es por que JavaScript es un lenguaje interpretado, por lo que el código se ejecuta a media que el navegador va interpretando el código aquí te dejo un link con Mas información sobre las diferencias entre los lenguajes compilados y interpretados) el código final quedaría así:

const prueba = () => {
  alert("prueba ok");
}

document.addEventListener("DOMContentLoaded",prueba,false);

3
  • Muchas gracias, el ultimo aun sin anteceder el const, let o var funciono, algo que me hace un poco de ruido es que por ejemplo si hago un addEventListener("click",prueba, false) contenido en una funcion llamada por ejemplo inicio en el document.addEventListener("DOMContentLoaded",inicio,false); si ejecuta una funcion arrow aun si esta declarada despues del listener. Aun asi gracias.
    – Christos
    Commented el 18 dic. 2020 a las 5:35
  • 1
    Si, fue un error mío. No es necesario asignar la función a una variable, esto pasa por que JavaScript también es un lenguaje dinámico básicamente esto quiere decir que cuando el navegador interpreta el código automáticamente se le asigna un tipo. en este caso si igualas algo que es indefinido (undefined) como seria prueba (sin el const var o let) a cualquier cosa el navegador lo interpreta como una variable por defecto var por lo que luego que el navegador convierte prueba (undefined) a una variable (var por defecto) le asigna la función () => { alert("prueba ok"); } lo que hace que el
    – Franco
    Commented el 18 dic. 2020 a las 6:11
  • 1
    código funcione con normalidad, igualmente en JavaScript no se aconseja utilizar las variables globales var (excepto en casos extremos), aquí es.stackoverflow.com/questions/29177/… explican porque.
    – Franco
    Commented el 18 dic. 2020 a las 6:11

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.