Metode addEventListener() DOM HTML

Definisi dan penggunaan

addEventListener() cara menambahkan pemproses peristiwa 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 lain di bawah halaman.

Sintaks

element.addEventListener(type, function, useCapture)

Parameter

Parameter Deskripsi
type

Diperlukan. Nama peristiwa.

Jangan gunakan awalan "on".

Gunakan "click" daripada "onclick".


Senarai Penuh Acara DOM
function Diperlukan. Fungsi yang dijalankan saat peristiwa terjadi.
useCapture

Pilihan (default = false).

  • false - Penanganan di tahap lonjakan.
  • true - Penanganan di tahap penangkapan.

Nilai Kembalian

Tidak ada.

Detil Teknik

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

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

Jika fungsi pendengar peristiwa yang sama digunakan di node yang sama dengan parameter yang sama type dan useCapture Parameter didaftarkan twice, then the second registration will be ignored. If a new event listener is registered on the same node while processing an event on the node, the new event listener will not be called for that event.

Ketika digunakan Node.cloneNode() Metode atau Document.importNode() Metode menyalin node Document tidak akan menyalin penyesuaian pendengar peristiwa yang didaftarkan untuk node asli.

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

Beberapa contoh lain

Contoh 3

Boleh anda menambahkan banyak peristiwa ke elemen yang sama:

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

Coba Sendiri

Contoh 4

Boleh anda menambahkan berbagai peristiwa ke elemen yang sama:

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

Coba Sendiri

Contoh 5

Untuk melepaskan 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

Perbezaan Antara Bubbling dan Capturing:

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

Coba Sendiri

Contoh 8

Hapus Perangkat Tangkap Acara:

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

Coba Sendiri

Dukungan Pelayar

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

Semua pelayar mendukung sepenuhnya:

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

Laman yang Berkenaan

Metode Elemen:

Metode addEventListener()

Metode removeEventListener()

Metode Dokumen:

Metode addEventListener()

Metode removeEventListener()

Panduan:

HTML DOM EventListener

Senarai Penuh Acara DOM