I think by definition, when addEventListener("click", function); the function receives one argument which is the event object. I have declared a function with a parameter. Specifically, pressing a button executes this function. If the function that I want to be executed when the event occurs, needs an argument, why in the call to it is it not necessary to provide it?
function displayNumeros(event) {
cifra += event.currentTarget.value;
document.getElementById("display").value = cifra;
}
/* Se supone que al llamar a la función displayNumeros(event); ésta
debiera recibir un argumento, pero no sólo no lo recibe sino que
además sólo funciona si no lo recibe*/
listaNumeros = document.getElementsByClassName("numero");
for (let i = 0; i < listaNumeros.length; i++) {
listaNumeros[i].addEventListener("click", displayNumeros);//No debiera ser displayNumeros(event);?
}
It is not that the parameter is not provided, the method "knows to send it" and, just to leave no room for doubt, here are some clarifications:
Another option is to use anonymous functions, but this is also not highly recommended:
As you have said, the issue is that the function does not have to be executed at the time the event function is defined, but when the event occurs.
In the past, the idea of addEventListener was to handle events with objects, not necessarily with functions, just objects that use the interface
EventListener
. Such objects had to implement a methodhandleEvent()
.The idea was that as long as we pass an object x to it, the method
addEventListener
would do[...lo que le pasemos...].handleEvent({...el_objeto_del_contexto...})
. In this way, an object had to be made for each event. And what was passed was the object itself.This was the way to execute a function in the "future", we agreed on a method name, and the event always executed that name . We could make different "versions" using the same name, using the object trick.
Then functions could be passed, but how do we make it not run at the moment? but in the "future", basically the same, but we pass the name of the function instead of the object.
Example of both ways, if we implement it in javascript:
Incidentally, the old way still works today, passing an object to it with the method
handleEvent
:A color detail, if we pass an object as a parameter, it is not validated that it exists
.handleEvent
, it only validates that it is an object:What happens when you invoke
addEventListener
is that you are registering that when the type of event that you specified in the first parameter exists, the function that you specified in the second parameter is executed.In such a way that it is not you who makes the call to the function, but it is the JS engine (or the browser) that makes it, as soon as the event exists.
It is also the JS engine that passes the argument
event
to the previously specified function.I will give you an example, perhaps a little far from how it actually works, but perhaps it can help you better understand what I have just explained.
I say that the example I gave may be far from how it actually works since surely the parts they say
vamos a suponer que este codigo es el del navegador
are made in C++ or some other language.Run the code and analyze the output. If it immediately stops, run it again.
Complement
Note that if we were to write
addCallbackHook("click", onClick(new Date()))
, the call toonClick(new Date())
returnsundefined
, then actually callingaddCallbackHook("click", onClick(new Date()))
would be the same as writingaddCallbackHook("click", undefined)
.And that what it is "saying" is that you register that the function
undefined
is executed when the eventclick
happens, which does not make sense, and in fact with the previous example an error would be raised.