Event handling (overview)

Events are documented in and/or below the pages for the JavaScript objects that emit them. For example, to find out events fired on the browser window or the current document see the events sections in Window and Document.

You can use the Event reference to find out what JavaScript objects fire events for particular APIs, e.g. animation, media, and so on.

There are two recommended approaches for registering handlers. Event handler code can be made to run when an event is triggered by assigning it to the target element's corresponding onevent property, or by registering the handler as a listener for the element using the addEventListener() method. In either case the handler will receive an object that conforms to the Event interface (or a derived interface). The main difference is that multiple event handlers can be added (or removed) using the event listener methods.

By convention, JavaScript objects that fire events have a corresponding "onevent" properties (named by prefixing "on" to the name of the event). These properties are called to run associated handler code when the event is fired, and may also be called directly by your own code.

To set event handler code you can just assign it to the appropriate onevent property. Only one event handler can be assigned for every event in an element. If needed the handler can be replaced by assigning another function to the same property.

Below we show how to set a simple greet() function for the click event using the onclick property.

const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.onclick = greet;

Note that an object representing the event is passed as the first argument to the event handler. This event object either implements or is derived from the Event interface.

The most flexible way to set an event handler on an element is to use the EventTarget.addEventListener method. This approach allows multiple listeners to be assigned to an element, and for listeners to be removed if needed (using EventTarget.removeEventListener).

Below we show how a simple greet() function can be set as a listener/event handler for the click event (you could use a lambda function instead of a named function if desired). Note again that the event is passed as the first argument to the event handler.

const btn = document.querySelector("button");

function greet(event) {
  console.log("greet:", event);
}

btn.addEventListener("click", greet);

The method can also take additional arguments/options to control aspects of how the events are captured and removed. More information can be found on the EventTarget.addEventListener reference page.

Using an Abort Signal

A notable event listener feature is the ability to use an abort signal to clean up multiple event handlers at the same time.

This is done by passing the same AbortSignal to the addEventListener() call for all the event handlers that you want to be able to remove together. You can then call abort() on the controller owning the AbortSignal, and it will remove all event handlers that were added with that signal. For example, to add an event handler that we can remove with an AbortSignal:

const controller = new AbortController();

btn.addEventListener(
  "click",
  (event) => {
    console.log("greet:", event);
  },
  { signal: controller.signal }
); // pass an AbortSignal to this handler

Then the event handler created by the code above can be removed like this:

controller.abort(); // removes any/all event handlers associated with this controller