HTML DOM addEventListener () metode

contoh

Untuk <button> elemen untuk menambahkan event kali klik. Ketika pengguna mengklik tombol pada id = "demo" dari <p> keluaran elemen "Hello World":

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

Coba »

Definisi dan Penggunaan

Metode addEventListener () digunakan untuk menambahkan event handler untuk elemen tertentu.

Tip: Gunakan removeEventListener () metode untuk menghilangkan metode addEventListener () untuk menambahkan 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 addEventListener () metode ,, Opera 7.0 dan versi sebelumnya tidak mendukung Opera. Namun, mereka tidak mendukung fungsi browser, Anda dapat menggunakan metode attachEvent () untuk menambahkan event handler (lihat "Lebih contoh" untuk solusi lintas-browser).

tatabahasa

Unsur .addEventListener (event, fungsi, useCapture )

Nilai parameter

parameter	deskripsi
peristiwa	Harus. Sebuah string menetapkan nama 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	Harus. Fungsi yang akan dilakukan ketika peristiwa tertentu memicu. Ketika 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- false-. penangan acara mengeksekusi dalam fase menggelegak

rincian teknis

Versi DOM:	Tingkat DOM 2 Acara
Pengembalian:	Tidak ada nilai pengembalian
record:	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 referensi fungsi eksternal dengan nama fungsi.

Contoh ini menunjukkan bagaimana melakukan pengguna mengklik <button> Fungsi elemen:

. Document.getElementById ( "myBtn") 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 dua acara klik di <button> elemen:

. Document.getElementById ( "myBtn") addEventListener ( "klik", myFunction);
. Document.getElementById ( "myBtn") addEventListener ( "klik", someOtherFunction);

Coba »

contoh

Anda dapat menambahkan berbagai jenis acara dalam elemen yang sama.

Contoh ini menunjukkan bagaimana untuk menambahkan beberapa peristiwa dengan <button> elemen:

. Document.getElementById ( "myBtn") addEventListener ( "mouseover", myFunction);
. Document.getElementById ( "myBtn") addEventListener ( "klik", someOtherFunction);
. Document.getElementById ( "myBtn") addEventListener ( "mouseout", someOtherFunction);

Coba »

contoh

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

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

Coba »

contoh

Memodifikasi <button> elemen Latar Belakang:

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

Coba »

contoh

Menggunakan parameter opsional untuk menunjukkan useCapture menggelegak dan menangkap fase yang berbeda:

. Document.getElementById ( "myDiv") addEventListener ( "klik", myFunction, true);

Coba »

contoh

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

// Tambahkan <div> event handler
. Document.getElementById ( "myDiv") addEventListener ( "mousemove", myFunction);

// Hapus <div> event handler
. Document.getElementById ( "myDiv") 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:

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

Coba »