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 Introduction to events.

What the available events?

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.

Registering event handlers

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.

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.

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

function greet(event){
  // print the event object to console
  console.log('greet:', arguments)
  }
  
  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.

EventTarget.addEventListener

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

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 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){
  // print the event object to console
  console.log('greet:', arguments)
  }
  
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', function(event) {
  // print the event object to console
  console.log('greet:', arguments)
  }, { 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