看看 handleEvent 方法
https://developer.mozilla.org/en-US/docs/Web/API/EventListener
“原始”Javascript:
function MyObj() {
this.abc = "ABC";
}
MyObj.prototype.handleEvent = function(e) {
console.log("caught event: "+e.type);
console.log(this.abc);
}
var myObj = new MyObj();
document.querySelector("#myElement").addEventListener('click', myObj);
现在单击您的元素(id 为“myElement”),它应该在控制台中打印以下内容:
捕获事件:单击
ABC
这允许您将对象方法用作事件处理程序,并可以访问该方法中的所有对象属性。
您不能直接将对象的方法传递给 addEventListener (就像这样:),element.addEventListener('click',myObj.myMethod);
并期望myMethod
像通常在对象上调用我一样行事。我猜测传递给 addEventListener 的任何函数都会以某种方式被复制而不是被引用。例如,如果您将事件侦听器函数引用传递给 addEventListener(以变量的形式)然后取消设置此引用,则事件侦听器在捕获事件时仍会执行。
将方法作为事件侦听器和 stil 传递 this
并且仍然可以访问事件侦听器中的对象属性的另一个(不太优雅的)解决方法是这样的:
// see above for definition of MyObj
var myObj = new MyObj();
document.querySelector("#myElement").addEventListener('click', myObj.handleEvent.bind(myObj));