在作为方法传递的事件侦听器回调上未定义事件引用答案

【问题标题】：Event reference is undefined on event listener callback passed as a method在作为方法传递的事件侦听器回调上未定义事件引用
【发布时间】：2015-12-19 18:30:16
【问题描述】：

当我将事件附加到元素时，没有调用回调方法。有问题的方法属于一个对象，但似乎我调用它的方式在点击事件发生时没有被调用。

 var myObject = {
     handledrop : function () {
          
         //retrieved created html element
         var elem = document.getElementById("required");
         elem.addEventListener("click", this.deleteFavorite.bind(this), false);
     },

     //this method isn't being called when click event occurs
     deleteFavorite: function (evt) {
        console.log(evt);
     }
 }

我做错了什么？如何传递正确的上下文以便调用正确的方法并传递正确的上下文，即事件

【问题讨论】：

似乎工作得很好 -> jsfiddle.net/adeneo/t4zoresh
addEventListner 拼写错误。修复它可以解决问题吗？
@Traktor53 不，这只是拼写错误
好的，窗口加载完毕后调用myObject.handledrop()。正如发布的那样，监听器注册已被编码为对象方法，但未被调用

标签： javascript reactjs dom-events addeventlistener

【解决方案1】：

几个调试/故障排除技巧：

发布“必需”元素的 html。

检查您认为获得的“必需”元素是否有效：

var elem = document.getElementById("required");
console.log('elem:',elem);

您还可以迭代其属性以确保该函数存在：

foreach(var property in elem){
    console.log('property:',property);
}

对于跨浏览器支持 - 您可能想阅读这篇文章： addEventListener vs onclick

【讨论】：