JavaScript menggunakan EventListener untuk beroperasi pada pengetahuan HTML DOM_Basic

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

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

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);

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!"); });

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!");
}

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);

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

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

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;
});

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

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

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);

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);

Sokongan penyemak imbas
Nombor dalam jadual mewakili nombor versi penyemak imbas pertama yang menyokong kaedah ini.

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);

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);

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

1 bulan yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

3 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

1 bulan yang lalu By DDD

Bagaimana untuk memperbaiki KB5055523 gagal dipasang di Windows 11?

2 minggu yang lalu By DDD

Inzoi: Cara Memohon ke Sekolah dan Universiti

3 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7748

15

Tutorial Java

1643

14

Tutorial CakePHP

1397

52

Tutorial Laravel

1291

25

Tutorial PHP

1234

29

Tunjukkan Lagi