EventListener

EventListener interface represents an object that can handle an event dispatched by an EventTarget 对象。

注意: 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.

特性

This interface neither implements, nor inherits, any properties.

方法

This interface doesn't inherit any methods.

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

范例

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!');
  }
});
					

结果

See Also:

规范

规范 状态 Comment
DOM
The definition of 'EventListener' in that specification.
实时标准 No change.
Document Object Model (DOM) Level 2 Events Specification
The definition of 'EventListener' in that specification.
Obsolete 初始定义。

浏览器兼容性

更新 GitHub 上的兼容性数据
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
EventListener Chrome 1 Edge 12 Firefox 1 IE 9 Opera 7 Safari 1 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 10.1 Safari iOS 1 Samsung Internet Android 1.0
handleEvent Chrome 1 Edge 12 Firefox 1 IE 9 Opera 7 Safari 1 WebView Android 1 Chrome Android 18 Firefox Android 4 Opera Android 10.1 Safari iOS 1 Samsung Internet Android 1.0

图例

完整支持
完整支持