This translation is incomplete. Please help translate this article from English.

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>

JavaScript

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

// Add a handler for the 'click' event by providing a callback function.
// Whenever the element is clicked, a pop-up with "Element clicked!" will
// appear.
buttonElement.addEventListener('click', function (event) {
  alert('Element clicked through function!');
});

// For compatibility, a non-function object with a `handleEvent` property is
// treated just the same as a function itself.
buttonElement.addEventListener('click', {
  handleEvent: function (event) {
    alert('Element clicked through handleEvent property!');
  }
});

Result

Specifications

Specification Status Comment
DOM
The definition of 'EventListener' in that specification.
Living Standard No change.
Document Object Model (DOM) Level 2 Events Specification
The definition of 'EventListener' in that specification.
Obsolete Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Edge Mobile Full support 12Firefox Android Full support 4Opera Android Full support 6Safari iOS Full support 1Samsung Internet Android ?
handleEventChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support 18Edge Mobile Full support 12Firefox Android Full support 4Opera Android Full support 6Safari iOS Full support 1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Document Tags and Contributors

Contributors to this page: fabio.rahamim
Last updated by: fabio.rahamim,