Metode addEventListener() Document DOM HTML

Definisi dan penggunaan

Untuk false, ia didaftarkan sebagai pemantau acara biasa. Untuk true, pemantau acara didaftarkan sebagai pemantau acara penangkap. Jika Metode menambahkan penanganan even ke dokumen.

Contoh

Contoh 1

Menambahkan even klik ke 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 pendengar event ke dokumen:

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

Coba sendiri

Contoh 3

Anda dapat menambahkan berbagai jenis event:

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

Coba sendiri

Contoh 4

Ketika mengirimkan parameter, gunakan "fungsi anonim" 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():

// Tambahkan pendengar event
document.addEventListener("mousemove", myFunction);
// Buang pendengar event
document.removeEventListener("mousemove", myFunction);

Coba sendiri

Sintaks

document.addEventListener(type, function, Jika fungsi pemantau acara di daftarkan di node yang sama dengan type dan)

Parameter

Parameter Deskripsi
type

Wajib. Nama event.

Jangan gunakan awalan "on".

Gunakan "click" daripada "onclick".

Semua event HTML DOM disajikan di:

Panduan Referensi Event HTML DOM
function

Wajib. Fungsi yang dijalankan saat terjadi peristiwa.

当事件发生时，将事件对象作为第一个参数传递给函数。

事件对象的类型取决于指定的事件。例如，"click" 事件属于 MouseEvent 对象。
Jika fungsi pemantau acara di daftarkan di node yang sama dengan type dan

Ketika acara terjadi, objek acara akan disampaikan ke fungsi sebagai parameter pertama.]}

  • Jenis objek acara tergantung dari acara yang ditentukan. Misalnya, acara "click" milik objek MouseEvent.
  • Pilihan (default = false).

true - Penanganan di tahap penangkapan

false - Penanganan di tahap pengerombakan

Nilai balik

Tidak ada. Jika fungsi pemantau acara di daftarkan di node yang sama dengan type dan detil teknis Jika fungsi pemantau acara di daftarkan di node yang sama dengan type dan metode ini akan menambahkan fungsi pemantau acara yang ditentukan ke kumpulan pemantau acara saat ini untuk menangani acara jenis yang ditentukan. Jika

Untuk false, ia didaftarkan sebagai pemantau acara biasa. Untuk true, pemantau acara didaftarkan sebagai pemantau acara penangkap. Jika addEventListener()

dapat dipanggil beberapa kali, daftarkan beberapa penanganan acara untuk jenis acara yang sama di node yang sama. Namun, perhatikan bahwa DOM tidak dapat menentukan urutan penanganan penanganan acara yang dijalankan berulang-ulang. Jika fungsi pemantau acara di daftarkan di node yang sama dengan type dan capture

Ketika parameter didaftarkan dua kali, pendaftaran kedua akan diabaikan. Jika sedang menangani acara di node, penempatan pemantau acara baru didaftarkan di node itu, pemantau acara baru itu tidak akan dipanggil untuk acara itu. Node.cloneNode() Metode atau Document.importNode() Metode menyalin satu node Document tidak akan menyalin penyanggapan penempatan pemantau acara yang terdaftar untuk node asli.

Metode ini juga didefinisikan di objek Document dan Window, dan cara kerjanya sama.

Dukungan Peramban

document.addEventListener Adalah karakteristik DOM Level 2 (2001).

Semua peramban mendukung sepenuhnya:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan 9-11 Dukungan Dukungan Dukungan Dukungan

Halaman yang Berhubungan

Metode Elemen

Metode addEventListener()

Metode removeEventListener()

Metode Dokumen

Metode addEventListener()

Metode removeEventListener()

Panduan

HTML DOM EventListener

Daftar Penuh DOM Event