this keyword inside addEventListener callback

Question

I read some other answer about this topic but I'm not sure I understand how this keyword works inside addEventListener.

const button = document.querySelector('button');

function foo() { console.log(this) }

button.addEventListener('click', foo);

foo is a regular function inside addEventListener, it's not a method on button object. When foo is called should be executed in the context of the global object, therefore this should be equal to window and not to button.

Looks like a situation similar to this example:

const obj = {
  method: function (cb) {
    console.log('method', this); // `this` === `obj`

    return cb();
  }
};

obj.method(function() {
  console.log('cb', this); // `this` === `window`
});

Where obj could be considered as button, method could be addEventListener and cb the callback inside addEventListener.

I know I can use bind to change the context of this but I want to understand more in depth why it works like that.

Why this inside addEventListener callback is invoked on the context of the current element instead of the global object?

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#The_event_listener_callback#The_value_of_this_within_the_handler — Jay Harris, Aug 25 '18 at 11:52
"*`foo` is a regular function inside `addEventListener`, it's not a method on `button` object.*" - that doesn't matter. If you call `foo()`, then yes you won't get a `this` value (or the window in sloppy mode), but when you use `addEventListener` then it will call the function *on* the button. Just as if in your `obj` example the `method` would do `cb.call(obj)` — Bergi, Aug 25 '18 at 18:26
Also consider the old style: `button.onclick = foo`. There the handler actually is a kind of method :-) — Bergi, Aug 25 '18 at 18:28
This problematic is very well explained in [**MDN Docs**](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_value_of_this_within_the_handler "MDN Web Docs"). *(Updated link of @JayHarris)* — , Jul 11 '21 at 15:25

score 22 · Answer 1 · answered Aug 25 '18 at 12:21

22

If we are using functions which have been defined using function keyword as an event handler, then that event handler function executes in the context of the element on which event was binded

button.addEventListener('click', foo);

so, in this case, this value inside foo will be button element.

If we use arrow functions instead of them then this value will be the window object

The reason is this in an arrow function has the same value as the context in which the arrow function was created

button.addEventListener('click', () => { console.log(this) // window } );

More about lexical this What is lexical 'this'?

answered Aug 25 '18 at 12:21

Mohana Naga Venkat Sayempu

866
6
11

thanks for mentioning arrow functions and differences between the two in terms of scope – Prid Jun 21 '19 at 17:54
You're the best. Appreciate the lexical reference. – TGEE Aug 22 '19 at 04:06

score 3 · Accepted Answer · answered Nov 03 '19 at 10:30

3

While we know that event listeners are executed with 'this' set to the event target, the below lines of code inside the EventTarget.prototype.dispatchEvent method in the EventTarget link that you found will answer your question as to how it is implemented.

for (var i = 0, l = stack.length; i < l; i++) {
    stack[i].call(this, event);
}

The 'stack' array has the callback functions and they are invoked using .call by passing in the event target instance (this) and event as arguments.

answered Nov 03 '19 at 10:30

Aravindh S N R

46
4

So, when we register an event with `addEventListener`, an object called `EventTarget.listener` is created, which contains all the events. Each event is an array (or a stack) of our callbacks. When a particular event occur, the browser invoke `EventTarget.prototype.dispatchEvent()` and execute all the callbacks in the stack, using `call()` to change the context of `this` to the element on which the event was bound. – pldg Jan 11 '20 at 21:16
If anyone was wondering if it is safe to replace `this` with `event.target` or `event.currentTarget`, it absolutely **is** as explained in [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#the_value_of_this_within_the_handler "MDN Web Docs") – Jul 11 '21 at 15:28
This makes sense. "this" in function invoking (not the method invoking, arrow function invoking, constructor invoking...) will return global object (window in browser) or undefined in 'strict mode'. There must be somewhere to change the binding context to make "this" point to element when use addEventListener. – tuq Jan 12 '23 at 02:33

score 2 · Answer 3 · answered Aug 25 '18 at 12:05

Event listeners are executed with this set to the object that triggered the event, as one listener can listen to events of many objects.

A regular function invocation however does not set this if the invocation expression does not contain a member access via .. In those cases, without "use strict" active, this will become the global context, which is window in the browser.

If you want this for cb to be obj, you could replace cb() with cb.apply(this), which would set cb's this to that of the enclosing function.

A final warning: these this mechanics only work for functions defined with the function keyword (and similar mechanics). The this inside of an arrow function becomes locked to that of the enclosing scope at the time of definition.

Rajat Badjatya · Answer 4 · 2018-08-25T18:16:59.507

As event handler is a type of callback, they are passed as a parameter to the function. Let's create a simple function and passed one callback as a parameter to it and see how it actually works.

    function testCallBack(fn){
       console.log('inside testCallBack');
       fn('Hello I am a callBack')
    }

    testCallBack(foo);

    function foo(param){
      console.log(param);
    }

// Outputs: 
inside testCallBack
Hello I am a callBack

Every scope in JavaScript has a this object that represents the calling object for the function.
That's the reason why this inside addEventListener callback is invoked on the context of the current element instead of the global object. Refer below code for more clear understanding:

   function sayNameForAll() {
        console.log(this.name);
    }

    var person1 = {
        name: "Rajat",
        sayName: sayNameForAll
    };

    var person2 = {
        name: "pldg",
        sayName: sayNameForAll
    };

    var name = "Sidd";

    person1.sayName();      // outputs "Rajat" here calling object is person1, so this represents person 1
    person2.sayName();      // outputs "pldg"

    sayNameForAll();        // outputs "Sidd"

So when you call button.addEventListner('click',foo), your calling object is button.

score 0 · Answer 5 · answered Aug 25 '18 at 12:30

Just like you can use bind or call to set this to whatever you want, the browser APIs can also call your functions with any value set to this. It’s used in a bunch of weird ways and isn’t very consistent. Outside of classes and methods, this is more like a secret extra argument to a function. In this case you could avoid needing it by getting the button element from event.target.

this keyword inside addEventListener callback

5 Answers5

Linked

Related