为什么我不能使用 off() 删除事件侦听器？

Question

I am trying to remove dynamically an event from the DOM. For this, I am using Chrome (version 79) dev tools, on page https://www.omgubuntu.co.uk/category/news?utm_source=menu

In the Elements tab, I go to Event Listeners, and look for the 'load' event, and I find 3 events on the Window element. So in the console, I type:

$(window).off('load');

The command executes with no error, but nothing seemed to have changed, even when I press the refresh button in the events section. I am expecting all the 'load' events for Window to disappear.

I have this same problem on many other sites, but works fine on my local webpage (this is how I know I am using JQuery the right way)...

Answer 1

.off() only removes events that were added via the .on() method, so any events added with other APIs wouldn't be affected.

Now, when you say even when I press the refresh button in the events section. I am expecting all the 'load' events for Window to disappear. , you misunderstand the nature of how a page is processed. If you refresh the page, all of its code is processed again, therefore even if you were successful in removing the handlers in your console, they would all come back because the page is starting all over again.

Understand that what you do in the console only affects the current instance of the page loaded within the browser.

Answer 2

To remove an existing listener, use getEventListeners command line API:

getEventListeners(window).load.forEach(x=>window.removeEventListener('load',x.listener))

or simply click the Remove button in Elements Event listeners panel: