为何能在按钮点击事件中使用obj内定义的handleClick函数？

咱们一步一步拆解这个过程，你就完全明白了：

1. 调用obj.clickBtn()时的this指向 #

当你执行obj.clickBtn()的时候，clickBtn函数是通过obj这个对象来调用的，所以函数内部的this会直接绑定到obj上。这时候this.handleClick其实就是obj.handleClick——也就是你定义在obj里的那个函数，我们成功拿到了这个函数的引用。

2. 将函数引用绑定到按钮事件 #

btn.addEventListener('click', this.handleClick)这行代码，本质是把刚才拿到的obj.handleClick函数引用，交给了按钮的点击事件监听器。浏览器会记住这个引用，当按钮被点击时，就会触发执行这个函数。

额外小知识点：点击时this的变化 #

不过这里要注意，虽然我们传递的是obj的方法，但当按钮点击触发函数时，函数内部的this会默认指向触发事件的DOM元素（也就是按钮）——这也是你在handleClick里console.dir(this)会输出按钮的原因。如果想让handleClick里的this仍然指向obj，可以用bind来固定this指向：

btn.addEventListener('click', this.handleClick.bind(this));

附上你的代码方便参考：

JavaScript代码

var obj = {
  name: "test",
  clickBtn: function() {
    var btn = document.getElementById("btn");
    btn.addEventListener('click', this.handleClick);
  },
  handleClick: function() {
    console.dir(this);
  }
}
obj.clickBtn();

HTML代码

<button id="btn">Click</button>

内容的提问来源于stack exchange，提问作者T.T