Contoh
Melampirkan acara klik untuk dokumen. Ketika pengguna mengklik di mana saja dalam dokumen, keluaran "Hello World" di <p> elemen dengan id = "demo":
document.addEventListener("click", function(){
document.getElementById("demo").innerHTML = "Hello World";
}); Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
The document. addEventListener() document. addEventListener() metode menempel event handler untuk dokumen.
Tip: Gunakan dokumen. removeEventListener() metode untuk menghapus sebuah event handler yang telah melekat dengan addEventListener() metode.
Tip: Gunakan elemen. addEventListener() metode untuk melampirkan sebuah event handler untuk elemen tertentu.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung metode ini.
| metode | |||||
|---|---|---|---|---|---|
| addEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Catatan: addEventListener() metode tidak didukung di Internet Explorer 8 dan versi sebelumnya, dan Opera 6.0 dan versi sebelumnya. Namun, untuk versi ini browser tertentu, Anda dapat menggunakan attachEvent() metode untuk melampirkan event handler (see "More Examples" below for a cross-browser solution) .
Sintaksis
document.addEventListener( event , function ,
useCapture )
Nilai parameter
| Parameter | Deskripsi |
|---|---|
| event | Wajib. Sebuah String yang menentukan nama acara. Catatan: Jangan gunakan "on" awalan. Misalnya, gunakan "click" bukan "onclick" . Untuk daftar semua peristiwa HTML DOM, melihat lengkap kami HTML DOM acara Object Reference . |
| function | Wajib. Menentukan fungsi untuk menjalankan ketika peristiwa itu terjadi. Ketika peristiwa itu terjadi, sebuah objek event dilewatkan ke fungsi sebagai parameter pertama. Jenis objek acara tergantung pada event tertentu. Misalnya, "click" event milik objek MouseEvent. |
| useCapture | Pilihan. Nilai Boolean yang menentukan apakah kejadian tersebut harus dieksekusi dalam menangkap atau di fase menggelegak. Kemungkinan nilai:
|
Rincian teknis
| DOM Versi: | Tingkat DOM 2 Acara |
|---|---|
| Kembali Nilai: | Tidak ada nilai pengembalian |
| changelog: | The useCapture parameter menjadi opsional di Firefox 6 dan Opera 11.60 (has always been optional for Chrome, IE and Safari) |
Contoh lebih
Contoh
Anda juga dapat merujuk ke eksternal "named" fungsi:
document.addEventListener("click",
myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
Cobalah sendiri " Contoh
Anda dapat menambahkan banyak peristiwa dokumen itu, tanpa Timpa acara yang ada.
Contoh ini menunjukkan bagaimana untuk menambahkan dua peristiwa klik ke dokumen:
document.addEventListener("click",
myFunction);
document.addEventListener("click", someOtherFunction); Cobalah sendiri " Contoh
Anda dapat menambahkan acara dari berbagai jenis dokumen.
Contoh ini menunjukkan bagaimana untuk menambahkan banyak acara untuk dokumen:
document.addEventListener("mouseover", myFunction);
document.addEventListener("click", someOtherFunction);
document.addEventListener("mouseout", someOtherFunction); Cobalah sendiri " Contoh
Ketika melewati nilai parameter, menggunakan "anonymous function" yang memanggil fungsi ditentukan dengan parameter:
document.addEventListener("click", function() {
myFunction(p1, p2);
}); Cobalah sendiri " Contoh
Mengubah warna latar belakang dari dokumen <body> elemen:
document.addEventListener("click", function(){
document.body.style.backgroundColor = "red";
}); Cobalah sendiri " Contoh
Menggunakan removeEventListener() metode untuk menghapus sebuah event handler yang telah melekat dengan addEventListener() metode:
// Attach an event handler to the document
document.addEventListener("mousemove",
myFunction);
// Remove the event handler from the document
document.removeEventListener("mousemove", myFunction); Cobalah sendiri " Contoh
Untuk browser yang tidak mendukung addEventListener() metode, Anda dapat menggunakan attachEvent() metode.
Contoh ini menunjukkan solusi lintas-browser:
if (document.addEventListener) { // For all major browsers, except IE 8 and earlier
document.addEventListener("click", myFunction);
} else if (document.attachEvent) { // For IE 8 and earlier versions
document.attachEvent("onclick", myFunction);
} Cobalah sendiri " Pages terkait
JavaScript Tutorial: HTML DOM EventListener
HTML DOM Referensi: elemen. addEventListener()