EventListener

The EventListener interface represents an object that can handle an event dispatched by an EventTarget object.

Note: Due to the need for compatibility with legacy content, EventListener accepts both a function and an object with a handleEvent() property function. This is shown in the example below.

Properties

This interface neither implements, nor inherits, any properties.

Methods

This interface doesn't inherit any methods.

EventListener.handleEvent(): A function that is called whenever an event of the specified type occurs.

Example

HTML

<button id="btn">Click here!</button>

<p id="funcOutput"></p>
<p id="handleEvtOutput"></p>

JavaScript

const buttonElement = document.getElementById('btn');
const funcOutput = document.getElementById('funcOutput');
const handleEvtOutput = document.getElementById('handleEvtOutput');

// Add a handler for the 'click' event by providing a callback function.
// When the element is clicked, the output "Element clicked through function!"
// will appear in the p tag with the id of "funcOut".
buttonElement.addEventListener('click', function (event) {
  funcOutput.textContent = 'Element clicked through function!';
});

// For compatibility, a non-function object with a `handleEvent` property is
// treated just the same as a function itself.
// The output "Element clicked through handleEvent property!" will appear
// simultaneously in the p tag with the id of "handleEvtOutput".
buttonElement.addEventListener('click', {
  handleEvent: function (event) {
    handleEvtOutput.textContent = 'Element clicked through handleEvent property!';
  }
});

Result

Specifications

Specification
DOM Standard (DOM) # callbackdef-eventlistener

Browser compatibility

BCD tables only load in the browser