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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
EventListener
1
12
1
9
7
1
1
18
4
10.1
1
1.0
handleEvent
1
12
1
9
7
1
1
18
4
10.1
1
1.0

See also

© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/EventListener