EventListener 介面表示一個可以處理由 EventTarget 物件分派事件的物件。

注意:基於相容舊版內容的需要, EventListener 可以接受一個函式及一個帶有 handleEvent() 屬性函式的物件。相關的範例顯示在下方。

屬性

這個介面並不實作且不繼承任何屬性。

方法

這個介面不繼承任何方法。

EventListener.handleEvent()
一個可以在指定類型事件發生時被呼叫的函數。

範例

HTML

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

JavaScript

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

// 透過提供回呼函數的方式對「click」事件新增處理器。
// 當元素被點選後會出現「Element clicked!」的彈出訊息。
buttonElement.addEventListener('click', function (event) {
  alert('Element clicked through function!');
});

// 基於相容性,一個帶有 `handleEvent` 的非函式物件可被視為處理函式。
buttonElement.addEventListener('click', {
  handleEvent: function (event) {
    alert('Element clicked through handleEvent property!');
  }
});

結果

檢閱相關:

規格

規格 狀態 註解
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.

瀏覽器相容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
EventListenerChrome 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 18Firefox Android Full support 4Opera Android Full support 10.1Safari 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 18Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

文件標籤與貢獻者

標籤: 
此頁面的貢獻者: t7yang, mdnwebdocs-bot, tigercosmos, jackblackevo
最近更新: t7yang,