Metode addEventListener() Dokumen DOM HTML

Definisi dan penggunaan

addEventListener() Method menambahkan pemroses peristiwa ke dokumen.

实例

Contoh 1

Tambahkan peristiwa click kepada dokumen:

document.addEventListener("click", myFunction);
function myFunction() {
  document.getElementById("demo").innerHTML = "Hello World";
}

Coba sendiri

Sintaks yang lebih sederhana:

document.addEventListener("click", function(){
  document.getElementById("demo").innerHTML = "Hello World";
});

Coba sendiri

Contoh 2

Anda dapat menambahkan beberapa penerimaa acara ke dokumen:

document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);

Coba sendiri

Contoh 3

Anda dapat menambahkan jenis acara yang berbeda:

document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);

Coba sendiri

Contoh 4

Ketika mengirim parameter, gunakan "fungsi aneh" untuk memanggil fungsi dengan parameter:

document.addEventListener("click", function() {
  myFunction(p1, p2);
});

Coba sendiri

Contoh 5

Ubah warna latar belakang dokumen:

document.addEventListener("click", function(){
  document.body.style.backgroundColor = "red";
});

Coba sendiri

Contoh 6

Gunakan metode removeEventListener():

// Tambah penerimaa acara
document.addEventListener("mousemove", myFunction);
// Buang penerimaa acara
document.removeEventListener("mousemove", myFunction);

Coba sendiri

Sintaks

document.addEventListener(type, function, capture)

Parameter

Parameter Deskripsi
type

Wajib. Nama acara.

Jangan gunakan awalan "on".

Gunakan "click" bukannya "onclick".

Semua acara HTML DOM disajikan di:

Panduan Rujukan Objek Acara HTML DOM
function

Wajib. Fungsi yang dijalankan saat peristiwa terjadi.

當事件發生時，將事件對象作為第一個參數傳遞給函數。

事件對象的類型取決於指定的事件。例如，"click" 事件屬於 MouseEvent 對象。
capture

可選（默認 = false）。

  • true - 處理程序在捕獲階段執行
  • false - 處理程序在冒泡階段執行

返回值

無。

技術細節

該方法將把指定的事件監聽器函數添加到當前節點的監聽器集合中，以處理指定的 type 的事件。如果 capture 為 true，則監聽器被註冊為捕捉事件監聽器。如果 capture 為 false，它被註冊為普通事件監聽器。

addEventListener() 可能被調用多次，在相同的節點上為同種類型的事件註冊多個事件句柄。但要注意，DOM 不能確定多個事件句柄被調用的順序。

如果一個事件監聽器函數在相同的節點上用相同的 type 和 capture 參數註冊了兩次，那麼第二次註冊將被忽略。如果正在處理一個節點上的事件時，在這個節點上註冊了一個新的事件監聽器，則不會為那個事件調用新的事件監聽器。

當用 Node.cloneNode() 方法或 Document.importNode() 方法複製一個 Document 處理時，不會複製為原始處理器註冊的事件監聽器。

這個方法也在 Document 和 Window 對象上定義了，而且工作方式類似。

瀏覽器支持

document.addEventListener 是 DOM Level 2 (2001) 特性。

所有瀏覽器都完全支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持

相關頁面

元素方法

addEventListener() 方法

removeEventListener() 方法

文檔方法

addEventListener() 方法

removeEventListener() 方法

教程

HTML DOM EventListener

完整的 DOM 事件列表