tutorial pengembangan web terbaru
 

HTML DOM addEventListener() Method

<Elemen Object

Contoh

Melampirkan acara klik untuk <button> elemen. Ketika pengguna mengklik tombol, keluaran "Hello World" di <p> elemen dengan id = "demo":

document.getElementById("myBtn").addEventListener("click", function(){
    document.getElementById("demo").innerHTML = "Hello World";
});
Cobalah sendiri "

Lebih "Try it Yourself" contoh di bawah ini.

Definisi dan Penggunaan

The addEventListener() metode menempel event handler untuk elemen tertentu.

Tip: Gunakan removeEventListener() metode untuk menghapus sebuah event handler yang telah melekat dengan addEventListener() metode.

Tip: Gunakan dokumen. addEventListener() metode untuk melampirkan sebuah event handler untuk dokumen.

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

element .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:
  • benar - Acara handler dijalankan dalam fase menangkap
  • Default false-. Pengendali event dilaksanakan di fase menggelegak

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

Contoh lebih

Contoh

Anda juga dapat merujuk ke eksternal "named" fungsi.

Contoh ini menunjukkan bagaimana melaksanakan fungsi ketika pengguna mengklik pada <button> elemen:

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

function myFunction() {
    document.getElementById("demo").innerHTML = "Hello World";
}
Cobalah sendiri "

Contoh

Anda dapat menambahkan banyak peristiwa untuk unsur yang sama, tanpa Timpa acara yang ada.

Contoh ini menunjukkan bagaimana untuk menambahkan dua peristiwa klik pada yang sama <button> elemen:

document.getElementById("myBtn").addEventListener("click", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
Cobalah sendiri "

Contoh

Anda dapat menambahkan acara dari berbagai jenis dengan unsur yang sama.

Contoh ini menunjukkan cara menambahkan banyak peristiwa pada yang sama <button> elemen:

document.getElementById("myBtn").addEventListener("mouseover", myFunction);
document.getElementById("myBtn").addEventListener("click", someOtherFunction);
document.getElementById("myBtn").addEventListener("mouseout", someOtherFunction);
Cobalah sendiri "

Contoh

Ketika melewati nilai parameter, menggunakan "anonymous function" yang memanggil fungsi ditentukan dengan parameter:

document.getElementById("myBtn").addEventListener("click", function() {
    myFunction(p1, p2);
});
Cobalah sendiri "

Contoh

Mengubah warna latar belakang dari <button> elemen:

document.getElementById("myBtn").addEventListener("click", function(){
    this.style.backgroundColor = "red";
});
Cobalah sendiri "

Contoh

Menggunakan opsional useCapture parameter untuk menunjukkan perbedaan antara menggelegak dan menangkap:

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

Contoh

Menggunakan removeEventListener() metode untuk menghapus sebuah event handler yang telah melekat dengan addEventListener() metode:

// Attach an event handler to <div>
document.getElementById("myDIV").addEventListener("mousemove", myFunction);

// Remove the event handler from <div>
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
Cobalah sendiri "

Contoh

Untuk browser yang tidak mendukung addEventListener() metode, Anda dapat menggunakan attachEvent() metode.

Contoh ini menunjukkan solusi lintas-browser:

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // For all major browsers, except IE 8 and earlier
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // For IE 8 and earlier versions
    x.attachEvent("onclick", myFunction);
}
Cobalah sendiri "

Pages terkait

JavaScript Tutorial: HTML DOM EventListener

HTML DOM Referensi: dokumen. addEventListener()

<Elemen Object