CODEWITHSUNDEEP
javascriptdom-events
Gautham Renganathan
Gautham Renganathan

Reputation: 645

Behavior of removeEventListener

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?

Upvotes: 12

Views: 10953

Answers (3)

Stephen Ng'ang'a
Stephen Ng'ang'a

Reputation: 21

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

Upvotes: 2

Cerbrus
Cerbrus

Reputation: 72957

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

Upvotes: 12

user2428118
user2428118

Reputation: 8114

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.

Upvotes: 7

Related Questions