Event handling (overview)

Events are signals fired inside the browser window that notify of changes in the browser or operating system environment. Programmers can create event handler code that will run when an event fires, allowing web pages to respond appropriately to change.

This page provides a very brief "reminder" of how to work with events and event handlers. New developers should instead read Document.

You can use the derived interface). The main difference is that multiple event handlers can be added (or removed) using the event listener methods.

Warning: A third approach for setting event handlers using HTML onevent attributes is not recommended! They inflate the markup and make it less readable and harder to debug. For more information see Inline event handlers.

Using onevent properties

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.

js
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 EventTarget.removeEventListener).

Note: The ability to add and remove event handlers allows you to, for example, have the same button performing different actions in different circumstances. In addition, in more complex programs cleaning up old/unused event handlers can improve efficiency.

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

js
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 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:

js
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:

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