Latest web development tutorials
×

JavaScript kuliah

JavaScript kuliah JavaScript pengantar singkat JavaScript pemakaian JavaScript ekspor JavaScript tatabahasa JavaScript laporan JavaScript catatan JavaScript variabel JavaScript Jenis Data JavaScript benda JavaScript fungsi JavaScript cakupan JavaScript peristiwa JavaScript tali JavaScript operator JavaScript membandingkan JavaScript If...Else JavaScript switch JavaScript for JavaScript while JavaScript Break & Continue JavaScript typeof JavaScript Jenis Konversi JavaScript Regular Expressions JavaScript kesalahan JavaScript debugging JavaScript angkat variabel JavaScript Modus yang ketat JavaScript Gunakan tidak tepat JavaScript bentuk Authentication JavaScript Reserved Keywords JavaScript JSON JavaScript void JavaScript kode Spesifikasi

JS fungsi

JavaScript definisi fungsi JavaScript Argumen fungsi JavaScript fungsi panggilan JavaScript penutupan

JS HTML DOM

DOM pengantar singkat DOM HTML DOM CSS DOM peristiwa DOM EventListener DOM elemen

JS canggih Tutorial

JavaScript benda JavaScript Number JavaScript String JavaScript Date JavaScript Array JavaScript Boolean JavaScript Math JavaScript RegExp benda

JS Browser BOM

JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript pop JavaScript Kegiatan Jangka waktu JavaScript Cookies

JS gudang

JavaScript gudang JavaScript uji jQuery JavaScript uji Prototype

JS contoh

JavaScript contoh JavaScript contoh objek JavaScript Browser contoh objek JavaScript HTML DOM contoh JavaScript ringkasan

JS Reference manual

JavaScript benda HTML DOM benda

JavaScript HTML DOM EventListener

addEventListener () metode

contoh

Mendengarkan peristiwa dipicu ketika pengguna mengklik tombol:

. Document.getElementById ( "myBtn") addEventListener ( "klik", displayDate);

Coba »

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

addEventListener () metode untuk menambahkan event handler tidak menimpa event yang ada.

Anda dapat menambahkan beberapa event handler untuk satu elemen.

Anda dapat menambahkan lebih dari satu jenis yang sama dari event untuk unsur yang sama, seperti: dua "klik" event.

Anda dapat menambahkan objek untuk setiap DOM pendengar acara, tidak hanya elemen HTML. Seperti: window objek.

Metode addEventListener () dapat lebih mudah mengontrol acara (menggelegak dan capture).

Bila Anda menggunakan metode addEventListener (), JavaScript tag HTML dari kiri ke mengukir, lebih mudah dibaca, dengan tidak adanya tag kontrol HTML juga dapat menambahkan acara pendengar.

Anda dapat menggunakan metode removeEventListener () untuk menghapus pendengar acara.

tatabahasa

Unsur .addEventListener (event, fungsi, useCapture );

Parameter pertama adalah jenis (seperti "klik" atau "mousedown") acara.

Argumen kedua adalah fungsi panggilan dipicu setelah acara.

Parameter ketiga adalah nilai Boolean yang digunakan untuk menggambarkan suatu menggelegak peristiwa atau capture. Parameter ini bersifat opsional.

catatan Catatan: Jangan gunakan "pada" awalan. Misalnya, gunakan "klik", bukan "onclick".

unsur asli menambahkan event handler

contoh

Ketika pengguna mengklik pada elemen pop-up ketika "Hello World!":

Unsur .addEventListener ( "klik", fungsi () {alert ( "Hello World!");});

Coba »

Anda dapat menggunakan nama fungsi untuk referensi fungsi eksternal:

contoh

Ketika pengguna mengklik pada elemen pop-up ketika "Hello World!":

Unsur .addEventListener ( "klik", myFunction );

Fungsi myFunction () {
alert ( "Hello World!");
}

Coba »

Tambahkan beberapa event handler pada elemen yang sama

Metode addEventListener () memungkinkan Anda untuk menambahkan beberapa acara untuk elemen yang sama, dan tidak menimpa peristiwa yang ada:

contoh

Unsur .addEventListener ( "klik", myFunction );
Unsur .addEventListener ( "klik", mySecondFunction );

Coba »

Anda dapat menambah elemen yang sama dalam berbagai jenis acara:

contoh

Unsur .addEventListener ( "mouseover", myFunction );
Unsur .addEventListener ( "klik", mySecondFunction );
Unsur .addEventListener ( "mouseout", myThirdFunction );

Coba »

Tambahkan event handler untuk objek Jendela

Metode addEventListener () memungkinkan Anda untuk menambahkan objek dalam HTML DOM pendengar acara, HTML DOM objek seperti: elemen HTML, dokumen HTML, jendela objek. benda acara atau biaya lain seperti: XMLHttpRequest objek.

contoh

Ketika pengguna me-reset ukuran jendela untuk menambahkan acara pendengar:

window.addEventListener ( "mengubah ukuran", function () {
. Document.getElementById ( "demo") innerHTML = SomeText;
});

Coba »

melewati parameter

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

contoh

Unsur .addEventListener ( "klik", fungsi () {myFunction (p1, p2);});

Coba »

capture acara atau event menggelegak?

Acara pengiriman dua cara: menggelegak dan menangkap.

Acara delivery order dari unsur-unsur yang didefinisikan acara memicu. Jika Anda <p> elemen ke elemen <div>, pengguna mengklik <p> elemen, yang unsur "klik" event dipicu itu?

Menggelegak, acara ini akan menjadi elemen internal yang dipicu, maka memicu unsur eksternal, yaitu: acara klik <p> elemen dipicu pertama, kemudian memicu event klik <div> elemen.

Dalam penangkapan tersebut, acara akan menjadi elemen eksternal dipicu, unsur internal maka acara ini dipicu, yaitu: <div> elemen untuk memicu event klik, dan kemudian memicu peristiwa klik <p> elemen.

addEventListener () metode untuk menentukan "useCapture" parameter untuk mengatur jenis pengiriman:

addEventListener (event, fungsi, useCapture) ;

Nilai default adalah palsu, yang menggelegak untuk lulus, ketika nilai benar, menggunakan acara tersebut untuk menangkap transfer.

contoh

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

Coba »

removeEventListener () metode

removeEventListener () metode untuk menghilangkan metode addEventListener () untuk menambahkan event handler:

contoh

Unsur .removeEventListener ( "mousemove", myFunction );

Coba »

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
removeEventListener () 1.0 9.0 1.0 1.0 7.0

Catatan: IE 8 dan versi sebelumnya dari IE, Opera 7.0 dan versi sebelumnya tidak mendukung addEventListener () dan removeEventListener () metode. Namun, jenis versi browser yang dapat digunakan metode detachEvent () untuk menghapus sebuah event handler:

element.attachEvent (event, fungsi);
element.detachEvent (event, fungsi);

contoh

solusi lintas-browser:

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

Coba »

HTML DOM Acara Referensi Obyek

Semua peristiwa HTML DOM, Anda dapat melihat lengkap kami HTML DOM acara Object Reference .