Behavior of removeEventListener

Question

Please check the below code:

var clickfn = function(){
 alert("clicked");                    
}
document.getElementById("div1").addEventListener("click",clickfn,true);
clickfn = function(){  };
document.getElementById("div1").removeEventListener("click");

http://jsfiddle.net/qUtzL/4/

Why does the removeEventListener does not work?

With [removeEventListener](https://developer.mozilla.org/en-US/docs/DOM/element.removeEventListener), two arguments are required; only the third argument is optional. — apsillers, Nov 20 '12 at 13:41
Related: [How to remove all listeners in an element?](http://stackoverflow.com/questions/9251837/how-to-remove-all-listeners-in-an-element) — apsillers, Nov 20 '12 at 13:45

Cerbrus · Accepted Answer · 2015-04-28T06:29:47.843

12

removeEventListener takes 2 parameters, the event, and the function to remove.
This should work:

document.getElementById("div1").removeEventListener("click", clickfn);

Also, the function you're executing is empty.

var clickfn = function(){  };

edited Apr 28 '15 at 06:29

answered Nov 20 '12 at 13:34

Cerbrus

70,800
18
132
147

1

Ok thanks, I thought the removeEventListener("click") will remove all the function bound to it.My bad – Gautham Renganathan Nov 20 '12 at 13:43
what if I have a callback function to remove (anonymous)? I pass the function itself but doesn't seem to work – emre-ozgun Sep 02 '21 at 10:25
1

You need to pass a reference to the function you want to remove, @emreozgun10. So you’ll need to store that anonymous callback somewhere. – Cerbrus Sep 02 '21 at 10:38

user2428118 · Answer 2 · 2012-11-20T14:02:42.247

You have to specify the exact function you've specified to addEventListener as the second argument. If you specified the third useCapture argument, you'll have to specify the same and equivalent to removeEventListener as well.

For example:

function myFunc(event){ alert(event.target.textContent); }

var myElement=document.getElementById('myElement');

//Add EventListener
myElement.addEventListener('click', myFunc, false );

/* ... */

//Remove EventListener
myElement.removeEventListener('click', myFunc, false );

↪ View an example at jsFiddle

You can find more information at the Mozilla Developer wiki.

score 2 · Answer 3 · answered Oct 12 '20 at 14:36

I recently had this issue with the Navbar code in ReactJS to give the Navbar a background color after scrolling 100px on the y-axis and remove it if the page view is within 100px of the top.

All I had to do is introduce a reverse function in the removeEventListener to give it the rules for application.

const [show, handleShow] = useState(false);
  useEffect(() => {
    window.addEventListener('scroll', () => {
      if (window.scrollY > 100) {
        // do this
        handleShow(true);
      } else handleShow(false);
    });
    return () => {
      window.removeEventListener('scroll', () => {
        if (window.scrollY < 100) {
          // do this
          handleShow(false);
        } else handleShow(true);
      });
    };
  });

Behavior of removeEventListener

3 Answers3

Linked