Metode addEventListener() DOM HTML

Definisi dan penggunaan

addEventListener() Metode menambahkan penangan event ke elemen.

Contoh

Contoh 1

Tambahkan peristiwa click ke elemen <button>:

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

Coba sendiri

Contoh 2

Kode yang lebih padat:

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

Coba sendiri

Anda dapat menemukan contoh lainnya di bawah halaman.

Syarat

element.addEventListener(type, function, useCapture)

Parameter

Parameter Deskripsi
type

Wajib. Nama peristiwa.

Jangan gunakan awalan "on".

Gunakan "click" daripada "onclick".


Daftar lengkap peristiwa DOM
function Wajib. Fungsi yang dijalankan saat peristiwa terjadi.
useCapture

Pilihan (default = false).

  • false - Eksekusi pemrosesan di tahap penumpukan.
  • true - Eksekusi pemrosesan di tahap penangkapan.

Nilai Kembalian

Tidak ada.

Detil Teknik

Metode ini akan menambahkan fungsi penjaga peristiwa yang ditentukan ke kumpulan penjaga peristiwa saat ini untuk node saat ini untuk menangani jenis peristiwa yang ditentukan. type peristiwa. useCapture Untuk true, penjaga peristiwa didaftarkan sebagai penjaga peristiwa penangkap. useCapture Untuk false, ia didaftarkan sebagai penjaga peristiwa biasa.

addEventListener() dapat dipanggil beberapa kali, mendaftarkan beberapa penjaga peristiwa untuk jenis peristiwa yang sama di node yang sama. Namun, DOM tidak dapat menentukan urutan penjalan kaki beberapa penjaga peristiwa yang dipanggil.

Jika fungsi penjaga peristiwa yang sama digunakan di node yang sama dengan parameter yang sama type dan useCapture Parameter didaftarkan dua kali, pendaftaran kedua akan diabaikan. Jika sedang menangani peristiwa di node, maka penjaga peristiwa baru yang didaftarkan di node itu tidak akan dipanggil untuk peristiwa itu.

Ketika digunakan Node.cloneNode() Metode atau Document.importNode() Metode menyalin node Document akan menghindari menyalin penjaga peristiwa yang didaftarkan untuk node asli.

Metode ini juga ada Document dan Window Didefinisikan di objek, dan cara kerjanya sama seperti itu.

Beberapa contoh lainnya

Contoh 3

Anda dapat menambahkan banyak peristiwa ke elemen yang sama:

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

Coba sendiri

Contoh 4

Anda dapat menambahkan berbagai peristiwa ke elemen yang sama:

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

Coba sendiri

Contoh 5

Untuk mengirim nilai parameter, gunakan "fungsi anonim":

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

Coba sendiri

Contoh 6

Ubah warna latar belakang elemen <button>:

element.addEventListener("click", function() {
  this.style.backgroundColor = "red";
});

Coba sendiri

Contoh 7

Perbedaan antara bubbling dan capturing:

element1.addEventListener("click", myFunction, false); element2.addEventListener("click", myFunction, true);

Coba sendiri

Contoh 8

Hapus penanganan peristiwa:

element.addEventListener("mousemove", myFunction);
element.removeEventListener("mousemove", myFunction);

Coba sendiri

Dukungan peramban

element.addEventListener() Adalah fungsi DOM Level 2 (2001).

Seluruh peramban mendukung sepenuhnya:

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

Halaman terkait

Metode elemen:

Metode addEventListener()

Metode removeEventListener()

Metode dokumen:

Metode addEventListener()

Metode removeEventListener()

Panduan:

HTML DOM EventListener

Daftar lengkap peristiwa DOM