Develop Reference

Why can't I remove event listeners using off()?

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)...

.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.

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:

Listing of all events, to see why Tinymce doesn't focus?

Using the latest TinyMCE 4 in Inline mode, I was noticing sometimes (rarely, randomly) the focus event doesn't seem to fire, therefore some changes in my editor.on('focus' listener don't run. Oddly enough there is no ajax call that seems to cause this lag.
In efforts to debug this, I was noticing there is no editor.on('all' event-handler as Backbone has, and on beforeExecCommand doesn't handle all listeners like Loadcontent etc.
Is there an easy way to list events to see how some listeners aren't getting fired, or other way to debug weird race-condition in MCE editors starting up?

There are things I use to debug events:
Visual Events: its a small chrome plugin that as the name suggests shows you a visual representation of the event handlers for each of the DOM elements
Chrome developer tools' event breakpoints: You can set a breakpoint on any type of event. Perhaps some handler in your code is being fired first and calling event.stopPropagation()

How do I check if any Javascript event has been fired, anywhere?

I came across this question:
How to find out which JavaScript events fired?
But, that method of using Firebug will help me only if I log the events of a particular element right?
Here's my situation:
I want to analyze a webpage. It displays a list of headlines, and after you scroll down at the bottom of the page, something happens and then it fetches the next 20 headlines from the server and adds it back to the page. I would like to know exactly which event is fired and which function is called as this happens. How do I do that?

Use Chrome or Firefox Developer Tools and check under the networks tab.
For Firebug check console or scripts.
It shows you all the external files that have been used in your page.

Don't forget about
console.log("event fired");

How do I use Firebug to tell me what JavaScript is being fired?

I'm trying to reverse-engineer some JavaScript and, annoyingly, the JS isn't terribly clear or well-documented. I've got a series of events that are fired (using JQuery) that I need to find where the function lives.
Is there a way of configuring Firebug (or the Opera/IE consoles - not Chrome/Safari) so that I can see what events are fired when I click a button?
Thanks

In firebug, select console tab. Click on profile, do your activity on page, again click on profile...list of called function will be listed below in firebug panel.

I suggest that you get started with the "Using FireBug Console for Faster JavaScript Development" tutorial.

You could add a console.log() to every click method. Or simply add an Event listener to the document and console.log() some details or the event when something is clicked.

You can use the Firebug Profiler, e.g. by calling profile() in the console before your action and profileEnd() after the action. Firebug will then tell you which methods have been executed in the meantime (incl. lots of information about it).

How to debug JAVASCRIPT events? Or how to make all functions call trace?

For example there is a button. It is wrapped by <div>.
When pressing to this button, there is Javascript function call happen, then another function, then calling by ajax to the server and if it's OK, Javascript redirecting this page to another page.
It's hard to debug.
Is it possible to "catch" this event? I.e. to know, what function is called after the click on the button? Button doesn't have attribute onclick i.e. event listener is connected in Javascript.
And if it's not possible then is it possible to make trace? That is to look at all functions calls, which is called after which?
It would be better in visual way, though in textual is also good:)

Yeah - this sort of thing is not as simple as you would like.
Google Chrome, Edge and Opera have an Event Listeners panel. Right-click your button, then select Inspect Element. Make sure the correct element is selected, then check the Event Listeners panel on the right.
In Firefox this feature is implemented differently:
The inspector shows the word “event” next to elements in the HTML
Pane, that have event listeners bound to them. Click the icon, then
you’ll see a popup listing all the event listeners bound to this
element.
You can also use the debugger keyword to set a breakpoint in the call stack somewhere. Then use your favorite javascript debugger (built-in dev tools in Safari, Google Chrome & IE8, firebug for Firefox). In each of these, there's a call stack that'll allow you to navigate through the current call stack.

You can use firebug to trace the javascript code. Its plugin of Firefox to trace the styles (css), js and also allows to edit.
Opera provides dragonfly which is similar to firebug

Besides the accepted answer (upvoted) which mentions the event listeners available on the developer tools, I want to emphasize a simple, yet potentially useful point. If the expected event does not appear on the list, as expected, an alternative to a debugger is good plain old console.log() to find out what's going on.
As a practical example, it helped me to literally see the cause of the issue, when I logged the relevant element.innerHTML at the right place. Particularly helpful after changes to the DOM.

Check out the debugging features in Firebug, it'll let you add JavaScript breakpoints and step through your code.