JavaScript menggunakan EventListener untuk beroperasi pada pengetahuan HTML DOM

kaedah addEventListener()
Contoh
Acara mendengar dicetuskan apabila pengguna mengklik butang:

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

Salin selepas log masuk

Kaedah addEventListener() digunakan untuk menambah pengendali acara pada elemen yang ditentukan.
Pengendali acara yang ditambahkan oleh kaedah addEventListener() tidak akan menimpa pengendali acara sedia ada.
Anda boleh menambah berbilang pengendali acara pada elemen.
Anda boleh menambah berbilang pengendali acara daripada jenis yang sama pada elemen yang sama, seperti dua acara "klik".
Anda boleh menambah pendengar acara pada mana-mana objek DOM, bukan hanya elemen HTML. Seperti: objek tingkap.
Kaedah addEventListener() menjadikannya lebih mudah untuk mengawal peristiwa (bergelembung dan menangkap).
Apabila anda menggunakan kaedah addEventListener(), JavaScript dipisahkan daripada penanda HTML, menjadikannya lebih mudah dibaca dan anda boleh menambah pendengar acara tanpa mengawal penanda HTML.
Anda boleh menggunakan kaedah removeEventListener() untuk mengalih keluar pendengar acara.
Tatabahasa

element.addEventListener(event, function, useCapture);

Salin selepas log masuk

Parameter pertama ialah jenis acara (seperti "klik" atau "turun tetikus").
Parameter kedua ialah fungsi yang dipanggil selepas peristiwa dicetuskan.
Parameter ketiga ialah nilai Boolean yang digunakan untuk menerangkan sama ada acara itu berbuih atau menangkap. Parameter ini adalah pilihan.
Nota: Jangan gunakan awalan "on". Contohnya, gunakan "klik" dan bukannya "onclick".

Tambahkan pengendali acara pada elemen asal
Contoh
"Hello World!" muncul apabila pengguna mengklik pada elemen:

element.addEventListener("click", function(){ alert("Hello World!"); });

Salin selepas log masuk

Anda boleh menggunakan nama fungsi untuk merujuk fungsi luaran:
Contoh
"Hello World!" muncul apabila pengguna mengklik pada elemen:

element.addEventListener("click", myFunction);

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

Salin selepas log masuk

Tambahkan berbilang pengendali acara pada elemen yang sama
Kaedah addEventListener() membenarkan menambah berbilang acara pada elemen yang sama tanpa menulis ganti acara sedia ada:
Contoh

element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);

Salin selepas log masuk

Anda boleh menambah pelbagai jenis acara pada elemen yang sama:
Contoh

element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

Salin selepas log masuk

Tambah pengendali acara pada objek Tetingkap
Kaedah addEventListener() membolehkan anda menambah pendengar acara pada objek HTML DOM seperti elemen HTML, dokumen HTML dan objek tetingkap. Atau objek acara perbelanjaan lain seperti: objek xmlHttpRequest.
Contoh
Tambahkan pendengar acara apabila pengguna menetapkan semula saiz tetingkap:

window.addEventListener("resize", function(){
 document.getElementById("demo").innerHTML = sometext;
});

Salin selepas log masuk

Pas parameter
Apabila menghantar nilai parameter, gunakan "fungsi tanpa nama" untuk memanggil fungsi dengan parameter:
Contoh

element.addEventListener("click", function(){ myFunction(p1, p2); });

Salin selepas log masuk

Acara menggelegak atau menangkap acara?
Terdapat dua cara penyampaian acara: menggelegak dan menangkap.
Penghantaran acara mentakrifkan susunan acara elemen dicetuskan. Jika anda memasukkan elemen

ke dalam elemen

dan pengguna mengklik pada elemen

Dalam menggelegak, peristiwa elemen dalam akan dicetuskan dahulu, dan kemudian elemen luar, iaitu: peristiwa klik elemen

akan dicetuskan.
Dalam tangkapan, peristiwa elemen luar akan dicetuskan terlebih dahulu, dan kemudian peristiwa elemen dalam akan dicetuskan, iaitu: peristiwa klik elemen

akan dicetuskan dahulu, dan kemudian peristiwa klik elemen

akan dicetuskan.
Kaedah addEventListener() boleh menentukan parameter "useCapture" untuk menetapkan jenis penghantaran:

addEventListener(event, function, useCapture);

Salin selepas log masuk

Nilai lalai adalah palsu, yang bermaksud penghantaran gelembung Apabila nilainya benar, acara dihantar menggunakan tangkapan.
Contoh
document.getElementById("myDiv").addEventListener("klik", myFunction, true);

Cubalah »

kaedah buangEventListener()
Kaedah removeEventListener() mengalih keluar pengendali acara yang ditambahkan oleh kaedah addEventListener():
Contoh

element.removeEventListener("mousemove", myFunction);

Salin selepas log masuk

Sokongan penyemak imbas
Nombor dalam jadual mewakili nombor versi penyemak imbas pertama yang menyokong kaedah ini.
JavaScript menggunakan EventListener untuk beroperasi pada pengetahuan HTML DOM_Basic
Nota: IE 8 dan versi IE yang lebih awal, Opera 7.0 dan versi terdahulu tidak menyokong kaedah addEventListener() dan removeEventListener(). Walau bagaimanapun, untuk versi penyemak imbas sedemikian, pengendali acara boleh dialih keluar menggunakan kaedah detachEvent():

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

Salin selepas log masuk

Contoh
Penyelesaian merentas penyemak imbas:

var x = document.getElementById("myBtn");
if (x.addEventListener) {     // 所有主流浏览器，除了 IE 8 及更早版本
 x.addEventListener("click", myFunction);
} else if (x.attachEvent) {     // IE 8 及更早版本
 x.attachEvent("onclick", myFunction);

Salin selepas log masuk

Label berkaitan：

dom javascript

sumber：php.cn

Artikel sebelumnya：js hanya memuatkan kod contoh kod pengesahan selepas mengklik kemahiran kotak teks_javascript Artikel seterusnya：Kaedah pengisihan kemahiran tatasusunan_javascript objek JavaScript

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang