Hi, everyone. When you call addEventListener with a callback function in a temporary variable, something suddenly popped up.
Originally, when a scroll event occurs, I wrote the code first to check whether the event was passed through the callback function well.
var printEvent = function(e){
console.log(e);
}
window.addEventListener('scroll',printEvent));
Come to think of it, a function called printEvent had to have e defined when it was originally executed, and it had to have a factor in printEvent when it was executed.
var printEvent = function(e){
console.log(e);
}
printEvent(10);
Intuitively, if the callback function does not have a factor, I think it will naturally be implemented by just adding the name of the temporary variable.
If you receive e as a factor of the callback function like this, shouldn't you pass the factor like window.addEventListener('scroll',printEvent(e));?
So I wrote it like that, and then I ran the code.
var printEvent = function(e){
console.log(e);
}
window.addEventListener('scroll',printEvent(e));
It says e is not defined. This error occurs because it is not defined in the conste = 10; manner.
Question 1) Does the callback function that receives the factor as a temporary variable treat the callback function as if the factor was passed together just by entering the temporary variable when executing it?
Question 2) The addEventListener function receives e as a factor anyway. You return the event internally, or the event is declared, right?
Thank you for reading the question!!
javascript callback
Answer 1. No.
Answer 2. You should approach the concept of registering the action to be executed at the event from the outside. When an event occurs internally, a registered callback is executed, but an event object (with a predefined specification) is created and added as a factor for the function.
It is important to know who puts the event object in the callback.
Let me give you an example.
// A simple emulation of window.addEventHandler.
var obj = {
typeDescription: ['foo', 'bar', 'baz'],
addListener: function (type, handler) {
// The type is in the specification
// If handler is a viable function,
if (this.typeDescription.indexOf(type) >= 0 && typeof handler === 'function') {
window.setTimeout(function() {
var event = { type: type, timeStamp: Date.now() };
handler(event); // [run] the handler received by the listener at a particular time.
}, 100);
}
}
};
var printEventObject = function (e) {
console.log(e);
}; // Function expression.
obj.addListener('foo', printEventObject); // Do not [run] here.
So let's take a look at the case you mentioned.
obj.addListener('foo', printEventObject(e));
In this case, the second factor,
printEventObject(e)
This function is evaluated first. The value e is not declared within the accessible scope, so it spits reference errors.
Compared to normal operating codes that do not use temporary variables,
obj.addListener('foo', function(e) { // eventually the same function expression.
console.log(e);
});
If you look at the second factor, you just create a function, but you don't do it.
Callback is to hand over a viable form, not to put in a form where the function is executed.
Apart from the questioning situation,
The following function execution (closure) is not passed by receiving the e value from the outside.
var printTimeStamp = function (prefix) {
Return function(e) { // Meaning of "I'll get the event object and use it well"
console.log(prefix + e.timeStamp);
};
};
obj.addListener('foo', printTimeStamp('Time: '));
But it works fine. This is because the function that printTimeStamp returns is designed to accept the factor well.
At the time of registering an event as a temporary variable, the event value e is not visible, so I think I need to do something to hand it over to the function registered in the variable, but I don't need to. You only need to hand over the handler that you hand over to fit the required form you require.
© 2024 OneMinuteCode. All rights reserved.