Event reference is undefined on event listener callback passed as a method

Question

Callback method is not being called when I attach my event to element. The method in question belongs to an object but it seems the way I am calling it the method isn't being called when the click event occurs.

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

What am I doing wrong? How do I pass the right context so that the correct method is called and passed the right context which is event

seems to work just fine -> **https://jsfiddle.net/adeneo/t4zoresh/** — adeneo, Dec 19 '15 at 18:54
`addEventListner` is spelled incorrectly. Does fixing it solve the problem? — traktor, Dec 19 '15 at 19:11
Ok, call `myObject.handledrop()` after the window has loaded. As posted the listener registration has been coded as an object method but not called — traktor, Dec 19 '15 at 19:29

score 1 · Answer 1 · edited May 23 '17 at 11:44

Couple of debug/trouble-shooting tips:

Post the html for the "required" element.

Check that the "required" element you think you're getting is valid:

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

You can also iterate its properties to ensure that function exists:

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

For cross browser support - you might want to read this post: addEventListener vs onclick

Event reference is undefined on event listener callback passed as a method

1 Answers1