Pendengar Acara DOM JavaScript HTML
Metode addEventListener()
Contoh
Tambahkan pendengar acara yang diaktifkan saat pengguna mengklik tombol:
document.getElementById("myBtn").addEventListener("click", displayDate);
Metode addEventListener()ini menempelkan event handler ke elemen yang ditentukan.
Metode addEventListener()ini menempelkan event handler ke elemen tanpa menimpa event handler yang ada.
Anda dapat menambahkan banyak event handler ke satu elemen.
Anda dapat menambahkan banyak event handler dengan tipe yang sama ke satu elemen, yaitu dua event "klik".
Anda dapat menambahkan pendengar acara ke objek DOM apa pun, tidak hanya elemen HTML. yaitu objek jendela.
Metode addEventListener()ini memudahkan untuk mengontrol bagaimana acara bereaksi terhadap gelembung.
Saat menggunakan addEventListener()metode ini, JavaScript dipisahkan dari markup HTML, untuk keterbacaan yang lebih baik dan memungkinkan Anda menambahkan event listener bahkan saat Anda tidak mengontrol markup HTML.
Anda dapat dengan mudah menghapus event listener dengan menggunakan removeEventListener()metode ini.
Sintaksis
element.addEventListener(event, function, useCapture);
Parameter pertama adalah jenis peristiwa (seperti " click" atau " mousedown" atau Peristiwa DOM HTML lainnya .)
Parameter kedua adalah fungsi yang ingin kita panggil saat event terjadi.
Parameter ketiga adalah nilai boolean yang menentukan apakah akan menggunakan penggelembungan peristiwa atau penangkapan peristiwa. Parameter ini opsional.
Perhatikan bahwa Anda tidak menggunakan awalan "aktif" untuk acara tersebut; gunakan " click" sebagai ganti " onclick".
Tambahkan Event Handler ke Elemen
Contoh
Peringatan "Halo Dunia!" ketika pengguna mengklik elemen:
element.addEventListener("click", function(){ alert("Hello World!"); });
Anda juga dapat merujuk ke fungsi "bernama" eksternal:
Contoh
Peringatan "Halo Dunia!" ketika pengguna mengklik elemen:
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
Tambahkan Banyak Event Handler ke Elemen yang Sama
Metode addEventListener()ini memungkinkan Anda untuk menambahkan banyak acara ke elemen yang sama, tanpa menimpa acara yang ada:
Contoh
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
Anda dapat menambahkan acara dari berbagai jenis ke elemen yang sama:
Contoh
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
Tambahkan Event Handler ke objek jendela
Metode addEventListener()ini memungkinkan Anda untuk menambahkan pendengar acara pada objek DOM HTML apa pun seperti elemen HTML, dokumen HTML, objek jendela, atau objek lain yang mendukung peristiwa, seperti xmlHttpRequestobjek.
Contoh
Tambahkan pendengar acara yang diaktifkan saat pengguna mengubah ukuran jendela:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
Parameter kelulusan
Saat meneruskan nilai parameter, gunakan "fungsi anonim" yang memanggil fungsi yang ditentukan dengan parameter:
Contoh
element.addEventListener("click", function(){ myFunction(p1, p2); });
Gelembung Acara atau Penangkapan Acara?
Ada dua cara propagasi event di HTML DOM, bubbling dan capture.
Propagasi peristiwa adalah cara untuk menentukan urutan elemen ketika suatu peristiwa terjadi. Jika Anda memiliki elemen <p> di dalam elemen <div>, dan pengguna mengklik elemen <p>, peristiwa "klik" elemen mana yang harus ditangani terlebih dahulu?
Dalam menggelegak , acara elemen paling dalam ditangani terlebih dahulu dan kemudian bagian luar: acara klik elemen <p> ditangani terlebih dahulu, lalu acara klik elemen <div>.
Dalam menangkap peristiwa elemen paling luar ditangani terlebih dahulu dan kemudian bagian dalam: peristiwa klik elemen <div> akan ditangani terlebih dahulu, kemudian peristiwa klik elemen <p>.
Dengan metode addEventListener() Anda dapat menentukan jenis propagasi dengan menggunakan parameter "useCapture":
addEventListener(event, function, useCapture);
Nilai defaultnya adalah false, yang akan menggunakan propagasi bubbling, ketika nilainya disetel ke true, event menggunakan propagasi penangkapan.
Contoh
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Metode removeEventListener()
Metode removeEventListener()ini menghapus event handler yang telah dilampirkan dengan metode addEventListener():
Contoh
element.removeEventListener("mousemove", myFunction);
Referensi Objek Acara DOM HTML
Untuk daftar semua peristiwa DOM HTML, lihat Referensi Objek Peristiwa DOM HTML lengkap kami .