Dokumen HTML DOM addEventListener()
Contoh
Tambahkan acara klik ke dokumen:
document.addEventListener("click", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Sintaks yang lebih sederhana:
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
});
Lebih banyak contoh di bawah ini.
Definisi dan Penggunaan
Metode addEventListener()menempelkan event handler ke dokumen.
Lihat juga:
Tutorial EventListener DOM HTML
Metode Document removeEventListener()
Sintaksis
document.addEventListener(event, function, useCapture)
Parameter
| Parameter | Description |
| event | Required. The event name. Do not use the "on" prefix. For example, use "click" instead of "onclick". HTML DOM events are listed in Complete HTML DOM Event Object Reference. |
| function | Required. The function to run when the event occurs. When the event occurs, an event object is passed to the function as the first parameter. The type of the event object depends on the specified event. For example, the "click" event belongs to the MouseEvent object. |
| useCapture |
Optional. A boolean. Specifies if the event should be executed in the capturing or in the bubbling phase (default). true - The event handler is executed in the capturing phase.false - The event handler is executed in the bubbling phase.
|
Nilai Kembali
| NONE |
Lebih Banyak Contoh
Anda dapat menambahkan banyak event listener ke dokumen:
document.addEventListener("click", myFunction1);
document.addEventListener("click", myFunction2);
Anda dapat menambahkan berbagai jenis acara:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction);
Saat meneruskan parameter, gunakan "fungsi anonim" untuk memanggil fungsi dengan parameter:
document.addEventListener("click", function() {
myFunction(p1, p2);
});
Mengubah warna latar belakang dokumen:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
});
Menggunakan metode removeEventListener():
// Add an event listener
document.addEventListener("mousemove", myFunction);
// Remove event listener
document.removeEventListener("mousemove", myFunction);
Dukungan Peramban
document.addEventListeneradalah fitur DOM Level 2 (2001).
Ini didukung penuh di semua browser:
| Chrome | IE | Edge | Firefox | Safari | Opera |
| Yes | 9-11 | Yes | Yes | Yes | Yes |