Como han dicho, el tema es que la función no se tiene que ejecutar en el momento en el que se define la funcion del evento, sino cuando se produce el evento.
En un pasado, la idea de addEventListener era la de manejar eventos con objetos, no necesariamente con funciones, precisamente objetos que usaran la interfaz EventListener
. Dichos objetos tenían que implementar un método handleEvent()
.
La idea era que mientras le pasemos un objeto x el método addEventListener
iba a hacer [...lo que le pasemos...].handleEvent({...el_objeto_del_contexto...})
. De esta manera, había que hacer un objeto por cada evento. Y lo que se pasaba era el objeto mismo.
Esta era la manera de ejecutar una función en el "futuro", nos poníamos de acuerdo en un nombre de un método, y el evento siempre ejecutaba ese nombre. Nosotros podíamos hacer distíntas "versiones" usando el mismo nombre, usando el truco de los objetos.
Luego se pudieron pasar funciones, pero como hacemos para no se ejecute en el momento? sino en el "futuro", basicamente lo mismo, pero le pasamos el nombre de la función en lugar del objeto.
Ejemplo de ambas formas, si lo imlementariamos en javascript:
objetoDelEvento = {handleEvent:(e) => console.log(e)}
funcionDelEvento = (e) => console.log(e)
xNombreFuncion = (f) => {
let func = Object.keys({
f
})[0]
eval(`${func}('el contexto pasado a la funcion')`);
}
xObjeto = (o) => o.handleEvent("Este es el contexto pasado al objeto")
xNombreFuncion(funcionDelEvento); // <-- Nueva Forma
xObjeto(objetoDelEvento); // <-- Vieja Forma
Dicho sea de paso, aún hoy funciona la vieja forma, pasandole un objeto con el método handleEvent
:
const btn = document.getElementById("btn");
Manejador = class {
constructor() {}
handleEvent = (e) => console.log(e);
}
const manejador = new Manejador(); // No es un nombre es un objeto
btn.addEventListener("click", manejador);// <-- Hace manejador.handleEvent(contexto)
<button id="btn">
boton
</button>
Un detalle de color, si pasamos un objeto como parámetro, no se valida que exista .handleEvent
, valida solo que sea un objeto:
const btn = document.getElementById("btn");
const btn2 = document.getElementById("btn2");
btn.addEventListener("click", {});// <-- No lanza error, aunque no hace nada
btn.addEventListener("click", []);// <-- No lanza error, aunque no hace nada
<button id="btn">
boton
</button>
<button id="btn2">
boton2
</button>
mehotd( { type } )
y de esta manera solo obtener el dato que necesitas en especifico del objeto.