TypeError no detectada: invocación ilegal en addEventListener

Question

me sale un Uncaught TypeError: Illegal invocation para ambas versiones de este intento de sofocar un EventListener: (me da el error cuando se debe añadir al oyente, no cuando hago clic en el objetivo)

ronan.addEventListener("click", alert, false);

addEventListener.apply(ronan, ["click", alert, false]);

ronan es un elemento div que se devuelve con éxito por la consola, así que no creo que ese es el problema. ¿Alguna idea de por qué me sale este error? Leí el hilo this y no pude entenderlo.

Answer 1

Debe ajustar alert en una función. Esto funcionará:

ronan.addEventListener("click", function() { alert('Hi'); }, false); 

Aquí hay una fiddle de prueba. El uso de alert solo no funciona porque cuando se ejecuta un detector el valor de this dentro de esa función se establece en el objeto que está escuchando. Por ejemplo, si configura un oyente en ronan, dentro de ese oyente this === ronan. Esto presenta un problema para alert porque esa función espera que this sea igual a window. Puede solucionar esto (sin doble sentido) envolviendo la función en otra función o uniéndose a lo que espera para ser this:

document.body.addEventListener('click', alert.bind(window), false); 

No se olvide que en IE 9 < es necesario utilizar attachEvent en lugar de addEventListener.

---

Una nota sobre el uso de apply/call con addEventListener

Su segundo intento no funcionará porque usted está tratando de aplicar sus argumentos a window.addEventListener, a diferencia de HTMLElement.prototype.addEventListener, que es una diferente funcionan en conjunto:

// This won't work 
addEventListener.apply(ronan, ["click", alert.bind(window), false]); 

// This will work 
HTMLElement.prototype.addEventListener.apply(ronan, ['click', alert.bind(window), false]);