javascript - 作为方法传递的事件监听器回调上的事件引用未定义

标签 javascript reactjs dom-events addeventlistener

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

 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);
     }
 }

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

最佳答案

一些调试/故障排除技巧:

  1. 发布“必需”元素的 html。
  2. 检查您认为获得的“必需”元素是否有效:

    var elem = document.getElementById("required");
    console.log('elem:',elem);
    
  3. 您还可以迭代其属性以确保该函数存在:

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

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

关于javascript - 作为方法传递的事件监听器回调上的事件引用未定义,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34374005/

相关文章:

javascript - 使用 jquery .load ('pageName' ) 方法时,HTML 页面未从应用程序缓存中加载

javascript - 如何使用 ESlint : Disallow Assignment in return Statement (no-return-assign)? 解决警告

javascript - 基于 scroll React JS 的 Toggle 类

reactjs - 草案.JS : the proper way to detect content change

javascript - 是否有任何库具有 keyup/keypress keyCode 规范化代码?

javascript - 从链接中删除 "clickability"( anchor 标记)

javascript - 如何告诉 .hover() 等待?

javascript - Web 浏览器完全忽略 Controller 中的功能。没有显示错误,但无论如何都无法显示函数内部的任何内容

javascript - 解决进入路线前不跑

css - react : Production build looks different from development build