在以下代码中，此对象如何在 addEventListener 方法上工作？

Question

See fiddle

I have following Html code :

<table id="outside">
    <tr><td id="t1">one</td></tr>
    <tr><td id="t2">two</td></tr>
</table>

and Js code :

var el = document.getElementById("outside");
var Something = function(element) {
  this.name = 'Something Good';
  this.onclick1 = function(event) {
    console.log(this.name); // undefined, as this is the element
  };
  this.onclick2 = function(event) {
    console.log(this.name); // 'Something Good'
  };
  el.addEventListener('click', this.onclick1, false);
  el.addEventListener('click', this.onclick2.bind(this), false); 
}
Something();

while execution of Something() , this refer to the Window object. so onclick1 and onclick2 is the method on Window object.

Doubt :

1. When el.addEventListener('click', this.onclick1, false); is executed this object in this.onclick1 refer to the el object. then why onclick1 method is called(which is a method of window object), when an event is triggred. onclick1 method should call on window object not on el object.
2. In el.addEventListener('click', this.onclick2.bind(this), false); How this object in this.onclick2 and onclick2.bind(this) is different?

This example is taken from MDN

Answer 1

Event handlers are passed the element of the event target as the this object.

Function.bind() forces the this object of the called function to be a particular object, the parameter to bind.

If you don't override this with fn.bind(thisObject) when you create the handler function, then it will default to the event target (as mentioned in the MDN link in your question). If you do, it will be whichever object you specified as a parameter to .bind() .

Additional info about .bind() : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind