JavaScript menggunakan EventListener untuk beroperasi pada pengetahuan HTML DOM_Basic

kaedah addEventListener()
Contoh
Acara mendengar dicetuskan apabila pengguna mengklik butang:

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

Kaedah addEventListener() digunakan untuk menambah pengendali acara pada elemen yang ditentukan.
Pengendali acara yang ditambahkan oleh kaedah addEventListener() tidak akan menimpa pengendali acara sedia ada.
Anda boleh menambah berbilang pengendali acara pada elemen.
Anda boleh menambah berbilang pengendali acara daripada jenis yang sama pada elemen yang sama, seperti dua acara "klik".
Anda boleh menambah pendengar acara pada mana-mana objek DOM, bukan hanya elemen HTML. Seperti: objek tingkap.
Kaedah addEventListener() menjadikannya lebih mudah untuk mengawal peristiwa (bergelembung dan menangkap).
Apabila anda menggunakan kaedah addEventListener(), JavaScript dipisahkan daripada penanda HTML, menjadikannya lebih mudah dibaca dan anda boleh menambah pendengar acara tanpa mengawal penanda HTML.
Anda boleh menggunakan kaedah removeEventListener() untuk mengalih keluar pendengar acara.
Tatabahasa

element.addEventListener(event, function, useCapture);

Parameter pertama ialah jenis acara (seperti "klik" atau "turun tetikus").
Parameter kedua ialah fungsi yang dipanggil selepas peristiwa dicetuskan.
Parameter ketiga ialah nilai Boolean yang digunakan untuk menerangkan sama ada acara itu berbuih atau menangkap. Parameter ini adalah pilihan.
Nota: Jangan gunakan awalan "on". Contohnya, gunakan "klik" dan bukannya "onclick".

Tambahkan pengendali acara pada elemen asal
Contoh
"Hello World!" muncul apabila pengguna mengklik pada elemen:

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

Anda boleh menggunakan nama fungsi untuk merujuk fungsi luaran:
Contoh
"Hello World!" muncul apabila pengguna mengklik pada elemen:

element.addEventListener("click", myFunction);

function myFunction() {
 alert ("Hello World!");
}

Tambahkan berbilang pengendali acara pada elemen yang sama
Kaedah addEventListener() membenarkan menambah berbilang acara pada elemen yang sama tanpa menulis ganti acara sedia ada:
Contoh

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

Anda boleh menambah pelbagai jenis acara pada elemen yang sama:
Contoh

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

Tambah pengendali acara pada objek Tetingkap
Kaedah addEventListener() membolehkan anda menambah pendengar acara pada objek HTML DOM seperti elemen HTML, dokumen HTML dan objek tetingkap. Atau objek acara perbelanjaan lain seperti: objek xmlHttpRequest.
Contoh
Tambahkan pendengar acara apabila pengguna menetapkan semula saiz tetingkap:

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

Pas parameter
Apabila menghantar nilai parameter, gunakan "fungsi tanpa nama" untuk memanggil fungsi dengan parameter:
Contoh

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

Acara menggelegak atau menangkap acara?
Terdapat dua cara penyampaian acara: menggelegak dan menangkap.
Penghantaran acara mentakrifkan susunan acara elemen dicetuskan. Jika anda memasukkan elemen

ke dalam elemen

dan pengguna mengklik pada elemen

Dalam menggelegak, peristiwa elemen dalam akan dicetuskan dahulu, dan kemudian elemen luar, iaitu: peristiwa klik elemen

akan dicetuskan.
Dalam tangkapan, peristiwa elemen luar akan dicetuskan terlebih dahulu, dan kemudian peristiwa elemen dalam akan dicetuskan, iaitu: peristiwa klik elemen

akan dicetuskan dahulu, dan kemudian peristiwa klik elemen

akan dicetuskan.
Kaedah addEventListener() boleh menentukan parameter "useCapture" untuk menetapkan jenis penghantaran:

addEventListener(event, function, useCapture);

Nilai lalai adalah palsu, yang bermaksud penghantaran gelembung Apabila nilainya benar, acara dihantar menggunakan tangkapan.
Contoh
document.getElementById("myDiv").addEventListener("klik", myFunction, true);

Cubalah »

kaedah buangEventListener()
Kaedah removeEventListener() mengalih keluar pengendali acara yang ditambahkan oleh kaedah addEventListener():
Contoh

element.removeEventListener("mousemove", myFunction);

Sokongan penyemak imbas
Nombor dalam jadual mewakili nombor versi penyemak imbas pertama yang menyokong kaedah ini.

Nota: IE 8 dan versi IE yang lebih awal, Opera 7.0 dan versi terdahulu tidak menyokong kaedah addEventListener() dan removeEventListener(). Walau bagaimanapun, untuk versi penyemak imbas sedemikian, pengendali acara boleh dialih keluar menggunakan kaedah detachEvent():

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

Contoh
Penyelesaian merentas penyemak imbas:

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 所有主流浏览器，除了 IE 8 及更早版本
 x.addEventListener("click", myFunction);
} else if (x.attachEvent) {     // IE 8 及更早版本
 x.attachEvent("onclick", myFunction);