为什么我可以在这里使用句柄点击功能?

Question

方法handleClick是在obj中定义的，为什么我可以在按钮的click事件中使用它？

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

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

Answer 1

this

在你的代码段中有两个不同的上下文。

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

在函数声明中，this的上下文是父对象，obj.这里this.handleClick指的是obj.handleClick。

执行代码时，handleClick中this的上下文是在其上执行 click 事件处理程序的对象，因此在本例中btn。在上一行代码中，btn声明为对具有id属性值"btn"的 HTML 元素的引用。

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

Answer 2

这是因为最后你有这个代码obj.clickBtn();

obj.clickBtn();基本上将callclickBtn函数，该函数又将为按钮分配一个单击侦听器。 每当引发单击事件时，将连续调用handleClick方法。

删除该代码，它将不起作用。在这种情况下，每当您想要处理按钮上的单击事件时，您都必须自己添加侦听器。