Why is these 2 javascript calls to addEventListener have different result

Question

Can you help me to understand why these two JavaScript functions have different results when console.log(self) is executed?

The first code:

var test = {
  init: function() {
    var self = this;
    document.getElementById('show-button').addEventListener('click', self.showButton, false);
  },

  showButton: function() {
    var self = this;
    console.log(self);
  }
}
test.init();

Will result the following on the console when button show is clicked:

<button type="submit" class="btn btn-default" id="show-button" title="Show the list">Show</button>

Whereas the second code:

var test = {
  init: function() {
    var self = this;
    
    function show() {
      self.showButton();
    }
    
    document.getElementById('show-button').addEventListener('click', show, false);
  },

  showButton: function() {
    var self = this;
    console.log(self);
  }
}
test.init();

Will result the following on the console when button show is clicked:

Object {init: function, showButton: function}

Aaaah... the `this` context... One of the most troubling concepts in JS :) And maybe in other languages too? — Jeremy Thille, Jul 28 '17 at 10:02
The first script binds the button to `showButton`, because you're setting it as event handler directly. In the second script however, while it does bind the button to `show()`'s `this`, you're calling `self.showButton()`, and `self` still refers to the object as per the `init` call, thus binding the object to `showButton`. — , Jul 28 '17 at 10:06
Related:[How does the “this” keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work) — James Thorpe, Jul 28 '17 at 10:13
Btw, you can "fix" this by binding `show`'s context to `showButton`: `(self.showButton.bind(this))();` — , Jul 28 '17 at 10:14

score 1 · Accepted Answer · answered Jul 28 '17 at 10:07

In your first example, you pass self.showButton reference to the addEventListener. It'll then be executed in the context of the element applied to, in this example the button, so this will refer to that button.

In the second example your making a closure to capture your object instance thanks to the show method. So show is applied to the button, and then show calls showButton on your object instance.

To avoid this, you can use the bind function which does this exact job :

var test = {
  init: function() {
    var self = this;
    document.getElementById('show-button').addEventListener('click', self.showButton.bind(self), false);
  },

  showButton: function() {
    var self = this;
    console.log(self);
  }
}
test.init();

<button id="show-button">Show</button>

score 0 · Answer 2 · answered Jul 28 '17 at 10:11

The difference is due to how you pass the function to the event listener

1) document.getElementById('show-button').addEventListener('click', show, false);

Show is just a function (this = undefined) and this will be bound to the element.

2) document.getElementById('show-button').addEventListener('click', self.showButton, false);

self.showButton is an attribute (type function) which has already this bound to self (test object)

more info

Why is these 2 javascript calls to addEventListener have different result

2 Answers2