Program Pemantau Peristiwa JavaScript HTML DOM

Metode addEventListener()

Contoh

Tambahkan pemantau peristiwa yang dijalankan saat pengguna mengklik tombol:

document.getElementById("myBtn").addEventListener("click", displayDate);

Coba Sendiri

addEventListener() Metode ini menetapkan penanganan peristiwa untuk elemen yang ditentukan.

addEventListener() Metode ini menambahkan penanganan peristiwa untuk elemen tanpa mengganti penanganan peristiwa yang sudah ada.

Anda dapat menambahkan beberapa penanganan peristiwa untuk sebuah elemen.

Anda dapat menambahkan beberapa pemanggilan prosedur yang sama jenisnya ke elemen, seperti dua peristiwa "click".

Anda dapat menambahkan pemanggilan prosedur ke setiap objek DOM, bukan hanya elemen HTML, seperti objek window.

addEventListener() metode, ini membuat kontrol lebih mudah bagaimana peristiwa menanggapi bubbling.

Ketika menggunakan addEventListener() metode, JavaScript dan HTML tag dipisahkan untuk kebacaan yang lebih baik; bahkan saat tidak mengawasi tag HTML, Anda masih dapat menambahkan pemantau peristiwa.

Dengan menggunakan removeEventListener() Metode ini mudah untuk menghapus pemantau peristiwa.

Sintaks

element.addEventListener(event, function, useCapture);

Parameter pertama adalah tipe peristiwa (seperti "click" atau "mousedown").

Parameter kedua adalah fungsi yang perlu dipanggil saat peristiwa terjadi.

Parameter ketiga adalah nilai boolean yang menentukan penggunaan event bubbling atau event capturing. Parameter ini adalah opsional.

Perhatian:Jangan gunakan awalan "on" untuk peristiwa; gunakan "click" untuk menggantikan "onclick".

Menambahkan pemanggilan prosedur ke elemen

Contoh

Mencetak pesan "Hello World!" saat pengguna mengklik elemen:

element.addEventListener("click", function(){ alert("Hello World!"); });

Coba Sendiri

Anda juga dapat mengambil referensi fungsi "named" eksternal:

Contoh

Mencetak pesan "Hello World!" saat pengguna mengklik elemen:

element.addEventListener("click", myFunction);
function myFunction() {
    alert ("Hello World!");
}

Coba Sendiri

Menambahkan beberapa pemanggilan prosedur ke elemen yang sama

addEventListener() Metode ini memungkinkan Anda menambahkan beberapa peristiwa ke elemen yang sama tanpa mengganti peristiwa yang sudah ada:

Contoh

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Coba Sendiri

Anda dapat menambahkan berbagai jenis peristiwa ke elemen yang sama:

Contoh

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

Coba Sendiri

Menambahkan pemanggilan prosedur ke objek Window

addEventListener() Memungkinkan Anda menambahkan pemantau peristiwa ke objek DOM HTML apapun, seperti elemen HTML, objek HTML, objek window, atau objek yang mendukung peristiwa lainnya, seperti objek XMLHttpRequest.

Contoh

Menambahkan pemantau peristiwa ketika pengguna mengatur ukuran jendela:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

Coba Sendiri

Pengiriman parameter

Ketika mengirimkan nilai parameter, gunakan fungsi "匿名函数" yang diatur dalam bentuk parameter:

Contoh

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

Coba Sendiri

Penyebaran acara puncak atau penangkapan acara?

Dalam HTML DOM ada dua metode penyebaran acara: penyebaran puncak dan penangkapan.

Penyebaran acara adalah metode yang mendefinisikan urutan elemen saat terjadi acara. Jika ada <div> di dalam <p>, dan pengguna mengklik elemen <p>, mana yang pertama kali diproses acara "click"?

Dalam penyebaran puncak, elemen dalam paling pertama yang diobrolkan, lalu yang yang lebih luar: pertama kali diproses acara klik elemen <p>, lalu elemen <div>.

Dalam penangkapan, elemen luar paling pertama yang diobrolkan, lalu yang yang lebih dalam: pertama kali diproses acara klik elemen <div>, lalu elemen <p>.

Dalam metode addEventListener(), Anda dapat menentukan jenis penyebaran dengan menggunakan parameter "useCapture":

addEventListener(event, function, useCapture);

nilai standar adalah falsejika nilai ini diatur, akan digunakan untuk penyebaran puncak, jika nilai ini diatur truejika nilai ini diatur, acara akan digunakan untuk penyebaran penangkapan.

Contoh

document.getElementById("myP").addEventListener("click", myFunction(), true);
document.getElementById("myDiv").addEventListener("click", myFunction(), true);

Coba Sendiri

metode removeEventListener()

removeEventListener() Metode akan menghapus program penanganan acara yang telah ditambahkan melalui addEventListener() Program penanganan acara yang ditambahkan metode:

Contoh

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

Coba Sendiri

Dukungan browser

Angka dalam tabel menentukan versi browser yang pertama yang mendukung penuh metode ini.

Metode
addEventListener() 1.0 9.0 1.0 1.0 7.0
removeEventListener() 1.0 9.0 1.0 1.0 7.0

Keterangan:IE 8, Opera 6.0 dan versi yang lebih awalnya tidak mendukung addEventListener() dan removeEventListener() Metode. Namun, untuk versi browser khusus ini, Anda dapat menggunakan attachEvent() Metode menambahkan pemroses event kepada elemen, dan di detachEvent() Metode penghapusan:

element.attachEvent(event, function);
element.detachEvent(event, function);

Contoh

Solusi Browsa Berbagai macam:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // Untuk browser utama, kecuali IE 8 dan sebelumnya
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // Untuk IE 8 dan sebelumnya
    x.attachEvent("onclick", myFunction);
}

Coba Sendiri

Panduan Referensi Objek Event HTML DOM

Untuk daftar lengkap semua event HTML DOM, silakan kunjungi situs penuh kami Panduan Referensi Objek Event HTML DOM.