Remove event listeners not working

From Code Trash
Jump to: navigation, search

Copied from https://medium.com/@DavideRama/removeeventlistener-and-anonymous-functions-ab9dbabd3e7b

https://stackoverflow.com/questions/10444077/javascript-removeeventlistener-not-working


In this case, the event listener will be successfully removed because the removeEventListener's argument matches the reference to the function object of the addEventListener. In case, for any reason, you can’t or don’t want to store the object function, there is another solution. Which simply is, to don’t use an anonymous function and giving a name to the function callback.


element.addEventListener("click", function _listener() {
  // do something
  
  element.removeEventListener("click", _listener, true);
}, true);


In case if bind is used then it creates different signatures each time so the code should be like this

obj.onclickhandle = this.clickhandle.bind(this);
document.addEventListener('click', obj.onclickhandle)
document.removeEventListener('click', obj.onclickhandle) //works

and not as this

document.addEventListener('click', obj.onclickhandle.bind(this))
for the above this remove will not work document.removeEventListener('click',obj.onclickhandle) // wont work because of the above inline bind