HTML DOM addEventListener () metode

contoh

Menambahkan acara klik dalam dokumen. Ketika pengguna mengklik di mana saja dalam dokumen, id = "demo" dari <p> keluaran elemen "Hello World":

document.addEventListener ( "klik", function () {
. Document.getElementById ( "demo") innerHTML = "Hello World";
});

Coba »

Definisi dan Penggunaan

Metode document.addEventListener () digunakan untuk menambahkan event handler untuk dokumen.

Tip: Anda dapat menggunakan document.removeEventListener () metode untuk menghilangkan metode addEventListener () untuk menambahkan event handler.

Tip: Gunakan . Elemen addEventListener () Metode ditentukan elemen ke event handler.

Dukungan Browser

Angka dalam tabel tersebut merupakan browser pertama yang mendukung nomor versi metode.

cara
addEventListener ()	1.0	9.0	1.0	1.0	7.0

Catatan: Internet Explorer 8 dan versi sebelumnya dari IE tidak mendukung () metode addEventListener, Opera 7.0 dan versi sebelumnya tidak mendukung Opera. Namun, jenis versi browser yang dapat digunakan metode attachEvent () untuk menambahkan sebuah event handler (masalah kompatibilitas cross-browser dapat melihat "lebih contoh").

tatabahasa

document.addEventListener (event, fungsi, useCapture)

Nilai parameter

parameter	deskripsi
peristiwa	Diperlukan. nama string deskripsi acara. Catatan: Jangan gunakan "pada" awalan. Misalnya, gunakan "klik" bukan "onclick". Tip: Semua peristiwa HTML DOM, Anda dapat melihat lengkap kami HTML DOM acara Object Reference .
fungsi	Diperlukan. Ini menjelaskan fungsi setelah acara dipicu. Ketika acara ini dipicu, objek acara sebagai argumen pertama dilewatkan ke fungsi. Jenis acara benda bergantung pada acara tertentu. Misalnya, "klik" event milik MouseEvent (event mouse) objek.
useCapture	Opsional. Nilai Boolean yang menentukan apakah pelaksanaan acara di capture atau fase menggelegak. Kemungkinan nilai: benar - event dilaksanakan selama fase capture bawaan false-. penangan acara mengeksekusi dalam fase menggelegak

rincian teknis

Versi DOM:	Tingkat DOM 2 Acara
Pengembalian:	Tidak ada nilai pengembalian
catatan:	Di Firefox 6 dan Opera 11.60 di useCapture parameter adalah opsional. (Dalam Chrome, IE, dan Safari selalu opsional).

contoh yang lebih

contoh

Anda dapat disebut dengan fungsi eksternal nama fungsi:

document.addEventListener ( "klik", myFunction);

Fungsi myFunction () {
. Document.getElementById ( "demo") innerHTML = "Hello World";
}

Coba »

contoh

Anda dapat menambahkan banyak peristiwa dalam dokumen, menambahkan acara tidak akan menimpa acara yang ada.

Contoh ini menunjukkan bagaimana untuk menambahkan acara klik di dua dokumen:

document.addEventListener ( "klik", myFunction);
document.addEventListener ( "klik", someOtherFunction);

Coba »

contoh

Anda dapat menambahkan berbagai jenis acara dalam dokumen.

Contoh ini menunjukkan bagaimana untuk menambahkan beberapa peristiwa dalam dokumen:

document.addEventListener ( "mouseover", myFunction);
document.addEventListener ( "klik", someOtherFunction);
document.addEventListener ( "mouseout", someOtherFunction);

Coba »

contoh

Ketika melewati nilai parameter, menggunakan fungsi panggilan dengan parameter "fungsi anonim":

document.addEventListener ( "klik", function () {
myFunction (p1, p2);
});

Coba »

contoh

Memodifikasi <body> unsur latar belakang:

document.addEventListener ( "klik", function () {
document.body.style.backgroundColor = "red";
});

Coba »

contoh

Menggunakan metode removeEventListener () untuk menghapus melalui addEventListener () metode untuk menambahkan event handler:

// Tambahkan event handler untuk dokumen
document.addEventListener ( "mousemove", myFunction);

// Lepaskan event dokumen handler
document.removeEventListener ( "mousemove", myFunction);

Coba »

contoh

Jika browser Anda tidak mendukung metode addEventListener (), Anda dapat menggunakan metode attachEvent () sebagai gantinya.

Contoh berikut menunjukkan solusi lintas-browser:

jika (document.addEventListener) {// semua browser utama, kecuali IE 8 dan versi sebelumnya dari IE
document.addEventListener ( "klik", myFunction);
} Lain jika (document.attachEvent) {// IE 8 dan versi sebelumnya dari IE
document.attachEvent ( "onclick", myFunction);
}

Coba »