Pendengar Acara, Tulang Belakang Aplikasi Web Interaktif

Pendengar acara ialah komponen penting dalam aplikasi web, membolehkan mereka bertindak balas terhadap interaksi pengguna dan acara lain. Ia membenarkan kod JavaScript untuk melaksanakan fungsi tertentu apabila peristiwa tertentu berlaku, seperti mengklik butang, menaip teks atau memuatkan halaman.

Jenis Peristiwa

Banyak jenis acara boleh didengari dalam JavaScript, termasuk:

• Acara Tetikus: klik, alih tetikus, tetikus keluar, tetikus turun, tetikus, alih tetikus, dblclick, dsb.
• Acara Papan Kekunci: kekunci kekunci, kekunci, tekan kekunci
• Acara Bentuk: serahkan, tukar, input, fokus, kabur, dsb.
• Acara Dokumen: DOMContentLoaded, muat, bongkar, tatal, dll.
• Acara Tetingkap: ubah saiz, tatal, muatkan, bongkar, dll.
• Acara Tersuai: Acara yang ditentukan oleh kod anda sendiri.

Menambah Pendengar Acara

Untuk menambah pendengar acara pada elemen, anda boleh menggunakan kaedah addEventListener:

element.addEventListener(event, callback);

Di mana:

• elemen: Elemen yang anda ingin lampirkan pendengar acara.
• acara: Nama acara untuk didengari.
• panggil balik: Fungsi yang akan dilaksanakan apabila peristiwa berlaku.

Contoh:

<button>





<pre class="brush:php;toolbar:false">const button = document.getElementById('myButton');

button.addEventListener('click', () => {
  console.log('Button clicked!');
});

Mengalih keluar Pendengar Acara

Untuk mengalih keluar pendengar acara, gunakan kaedah removeEventListener:

button.removeEventListener('click', handleClick);

Amalan Terbaik

• Gunakan Perwakilan Acara: Untuk elemen yang mempunyai banyak elemen anak, pertimbangkan untuk menggunakan perwakilan acara untuk melampirkan pendengar acara tunggal pada elemen induk dan mengendalikan acara untuk anak-anaknya.
• Elakkan Pengendali Acara Sebaris: Daripada menggunakan atribut acara sebaris (cth., onclick), lampirkan pendengar acara menggunakan JavaScript untuk penyusunan dan kebolehselenggaraan yang lebih baik.
• Cegah Gelagat Lalai: Jika anda ingin menghalang tindakan lalai sesuatu acara (cth., menghalang penyerahan borang), gunakan kaedah preventDefault().

Atas ialah kandungan terperinci Pendengar Acara, Tulang Belakang Aplikasi Web Interaktif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!