Menguasai Pengendalian Acara dalam JavaScript: Daripada Asas kepada Teknik Lanjutan

Pengendalian Acara dalam JavaScript

Pengendalian acara ialah aspek penting dalam JavaScript yang membolehkan pembangun membuat halaman web interaktif dengan bertindak balas kepada tindakan pengguna seperti klik, penekanan kekunci atau pergerakan tetikus.

---

1. Apakah Acara?

Peristiwa ialah sebarang interaksi atau kejadian yang berlaku dalam halaman web, seperti:

• Tindakan tetikus: klik, dblclick, alih tetikus, keluar tetikus
• Tindakan papan kekunci: kekunci kekunci, kekunci kekunci, tekan kekunci
• Tindakan bentuk: serahkan, tukar, fokus
• Tindakan tetingkap: muatkan, ubah saiz, tatal

JavaScript mendengar acara ini dan bertindak balas dengan tindakan tertentu menggunakan pengendali acara.

---

2. Menambah Pendengar Acara

A. Menggunakan Atribut HTML Sebaris

Anda boleh melampirkan pengendali acara terus pada elemen HTML.

<button onclick="alert('Button clicked!')">Click Me</button>

B. Menggunakan Kaedah addEventListener

Ini adalah kaedah pilihan kerana ia memastikan HTML dan JavaScript berasingan.

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

C. Menggunakan pada Hartanah

Anda boleh menetapkan fungsi kepada sifat acara bagi elemen.

const button = document.querySelector("button");
button.onclick = function() {
  alert("Button clicked!");
};

---

3. Objek Peristiwa

Apabila peristiwa berlaku, JavaScript menyediakan objek acara dengan sifat dan kaedah yang berguna.

Contoh

document.querySelector("button").addEventListener("click", function(event) {
  console.log("Event type:", event.type); // Output: click
  console.log("Target element:", event.target); // Output: <button>...</button>
});

Sifat Objek Acara Biasa

• jenis: Jenis acara (cth., klik, keydown).
• sasaran: Elemen yang mencetuskan acara.
• currentTarget: Elemen yang pengendali acara dilampirkan.
• preventDefault(): Menghalang tindakan lalai (cth., menghentikan penyerahan borang).
• stopPropagation(): Menghentikan acara daripada menggelegak pokok DOM.

---

4. Penyebaran Acara

A. Berbuih

Acara bermula pada elemen sasaran dan menggelegak ke nenek moyangnya.

document.querySelector("div").addEventListener("click", function() {
  console.log("Div clicked!");
});

document.querySelector("button").addEventListener("click", function(event) {
  console.log("Button clicked!");
});

Jika anda mengklik butang, kedua-dua butang dan pengendali acara div akan dilaksanakan.

B. Menangkap

Acara bergerak dari akar ke bawah ke elemen sasaran.

Untuk menggunakan tangkapan, tetapkan argumen ketiga addEventListener kepada benar:

<button onclick="alert('Button clicked!')">Click Me</button>

Mencegah Pembiakan

const button = document.querySelector("button");
button.addEventListener("click", function() {
  alert("Button clicked!");
});

---

5. Jenis Acara Biasa

Acara Tetikus

• klik: Menyala apabila elemen diklik.
• dblclick: Menyala apabila elemen diklik dua kali.
• tetikus: Menyala apabila penuding tetikus memasuki elemen.

Acara Papan Kekunci

• keydown: Menyala apabila kekunci ditekan ke bawah.
• keyup: Menyala apabila kunci dilepaskan.

Borang Acara

• serahkan: Membakar apabila borang diserahkan.
• change: Menyala apabila nilai elemen bentuk berubah.

Acara Tetingkap

• muat: Menyala apabila halaman selesai dimuatkan.
• ubah saiz: Menyala apabila tetingkap penyemak imbas diubah saiznya.

---

6. Mengalih keluar Pendengar Acara

Untuk mengalih keluar pendengar acara, gunakan kaedah removeEventListener.

const button = document.querySelector("button");
button.onclick = function() {
  alert("Button clicked!");
};

---

7. Contoh Praktikal: Pengesahan Borang

document.querySelector("button").addEventListener("click", function(event) {
  console.log("Event type:", event.type); // Output: click
  console.log("Target element:", event.target); // Output: <button>...</button>
});

---

8. Amalan Terbaik

1. Gunakan addEventListener untuk fleksibiliti dan kod yang lebih bersih.
2. Pastikan JavaScript berasingan daripada HTML untuk kebolehselenggaraan yang lebih baik.
3. Gunakan stopPropagation dan preventDefault dengan bijak untuk mengurus tingkah laku acara.
4. Alih keluar pendengar acara apabila mereka tidak lagi diperlukan untuk mengelakkan kebocoran ingatan.

---

9. Ringkasan

• Pengendalian acara dalam JavaScript mendayakan aplikasi web interaktif.
• Gunakan addEventListener untuk melampirkan pengendali acara.
• Fahami objek acara dan penyebaran untuk kes penggunaan lanjutan.
• Amalkan pengurusan pendengar acara yang betul untuk prestasi yang optimum.

Menguasai pengendalian acara ialah kemahiran utama untuk membina aplikasi web yang dinamik dan mesra pengguna.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun timbunan penuh dengan kepakaran dalam kedua-dua teknologi hadapan dan belakang. Saya bekerja dengan pelbagai bahasa pengaturcaraan dan rangka kerja untuk membina aplikasi yang cekap, berskala dan mesra pengguna.
Jangan ragu untuk menghubungi saya melalui e-mel perniagaan saya: kaashshorts28@gmail.com.

Atas ialah kandungan terperinci Menguasai Pengendalian Acara dalam JavaScript: Daripada Asas kepada Teknik Lanjutan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!