为什么我不能在Javascript中清除事件监听器？

Question

With timeouts, I can do something like

let x = setTimeout(func, 0);
clearTimeout(x);

Is there a way to do something like

let x = document.addEventListener("click", func);
clearEventListener(x);

I can't seem to ever find a straightforward way of doing this and it comes up quite often.

Answer 1

Below is example code that adds an event listener to an element and then removes it the first time the event is handled. You can confirm that the event listener is removed by clicking the button a second time and observing that the handler function isn't executed.

 var eventHandler = function(e) { console.log('Handled the event once - now I\\'m going to remove the eventListner via removeEventListener.'); //remove the event handler e.target.removeEventListener('click', eventHandler); } //add an event handler document.getElementById('btn').addEventListener('click', eventHandler); 

 <input id="btn" type="button" value="Example"> 

Here is the mdn documentation for those methods:

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener