The addEventListener() metode
Contoh
Tambahkan pendengar acara yang kebakaran ketika pengguna mengklik tombol:
document.getElementById("myBtn").addEventListener("click", displayDate); Cobalah sendiri " The addEventListener() metode menempel sebuah event handler untuk elemen tertentu.
The addEventListener() metode menempel sebuah event handler untuk elemen tanpa Timpa event handler yang ada.
Anda dapat menambahkan banyak event untuk satu elemen.
Anda dapat menambahkan banyak event handler dari jenis yang sama untuk satu elemen, yaitu dua "click" peristiwa.
Anda dapat menambahkan event pendengar untuk setiap objek DOM tidak hanya elemen HTML. yaitu objek jendela.
The addEventListener() metode membuat lebih mudah untuk mengontrol bagaimana acara bereaksi terhadap menggelegak.
Bila menggunakan addEventListener() metode, JavaScript dipisahkan dari markup HTML, untuk dibaca lebih baik dan memungkinkan Anda untuk menambahkan acara pendengar bahkan ketika Anda tidak mengontrol markup HTML.
Anda dapat dengan mudah menghapus pendengar acara dengan menggunakan removeEventListener() metode.
Sintaksis
element .addEventListener( event, function, useCapture );Parameter pertama adalah jenis acara (seperti "click" atau "mousedown" ).
Parameter kedua adalah fungsi yang kita inginkan untuk panggilan ketika peristiwa itu terjadi.
Parameter ketiga adalah nilai boolean menentukan apakah akan menggunakan acara menggelegak atau menangkap acara. Parameter ini bersifat opsional.
Perhatikan bahwa Anda tidak menggunakan "on" awalan untuk acara; menggunakan "click" bukan "onclick" .
Tambahkan Event Handler ke Element
Contoh
Peringatan "Hello World!" ketika pengguna mengklik pada sebuah elemen:
element .addEventListener("click", function(){ alert("Hello World!"); }); Cobalah sendiri " Anda juga dapat merujuk ke fungsi "bernama" eksternal:
Contoh
Peringatan "Hello World!" ketika pengguna mengklik pada sebuah elemen:
element .addEventListener("click",
myFunction);
function myFunction() {
alert ("Hello World!");
} Cobalah sendiri " Tambahkan Banyak penangan Event untuk Elemen Sama
The addEventListener() metode memungkinkan Anda untuk menambahkan banyak peristiwa untuk unsur yang sama, tanpa Timpa kejadian yang ada:
Contoh
element .addEventListener("click", myFunction);
element .addEventListener("click", mySecondFunction);
Cobalah sendiri " Anda dapat menambahkan acara dari berbagai jenis dengan unsur yang sama:
Contoh
element .addEventListener("mouseover", myFunction);
element .addEventListener("click", mySecondFunction);
element .addEventListener("mouseout", myThirdFunction); Cobalah sendiri " Tambahkan Event Handler untuk Window Object
The addEventListener() metode memungkinkan Anda untuk menambahkan acara pendengar pada setiap HTML objek DOM seperti elemen HTML, dokumen HTML, objek jendela, atau benda lain yang mendukung acara, seperti xmlHttpRequest objek.
Contoh
Tambahkan pendengar acara yang kebakaran ketika pengguna mengubah ukuran jendela:
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext ;
});
Cobalah sendiri " passing Parameter
Ketika melewati nilai parameter, menggunakan "fungsi anonim" yang memanggil fungsi ditentukan dengan parameter:
Acara Bubbling atau acara Menangkap?
Ada dua cara perbanyakan acara di DOM HTML, menggelegak dan menangkap.
propagasi acara adalah cara mendefinisikan urutan elemen ketika sebuah peristiwa terjadi. Jika Anda memiliki <p> elemen di dalam <div> elemen, dan pengguna mengklik pada <p> elemen, yang elemen "click" acara harus ditangani pertama?
Dalam menggelegak acara paling unsur batin ini ditangani pertama dan kemudian bagian luar: yang <p> maka elemen acara klik ditangani pertama, <div> event kali klik elemen.
Dalam menangkap acara paling unsur luar yang ditangani pertama dan kemudian dalam: yang <div> event kali klik elemen akan ditangani pertama, maka <p> elemen acara klik.
Dengan addEventListener() metode Anda dapat menentukan jenis propagasi dengan menggunakan "useCapture" parameter:
addEventListener( event , function , useCapture );Nilai default adalah palsu, yang akan menggunakan propagasi menggelegak, ketika nilai diatur ke benar, acara menggunakan propagasi menangkap.
Contoh
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
Cobalah sendiri " The removeEventListener() metode
The removeEventListener() metode menghapus event handler yang telah terpasang dengan addEventListener() metode:
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 |
| removeEventListener() | 1.0 | 9.0 | 1.0 | 1.0 | 7.0 |
Catatan: addEventListener() dan removeEventListener() metode tidak didukung di IE 8 dan versi sebelumnya dan Opera 6.0 dan versi sebelumnya. Namun, untuk versi ini browser tertentu, Anda dapat menggunakan attachEvent() metode untuk melampirkan sebuah event handler untuk elemen, dan detachEvent() metode untuk menghapusnya:
element. attachEvent (event, function);
element. detachEvent (event,
function); Contoh
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 " HTML DOM Acara Referensi Obyek
Untuk daftar semua peristiwa HTML DOM, melihat lengkap kami HTML DOM acara Object Reference .