Memahami Acara DOM dalam JavaScript: Panduan Komprehensif untuk Interaksi

Acara DOM dalam JavaScript

Peristiwa DOM ialah tindakan atau kejadian yang berlaku dalam penyemak imbas, seperti interaksi pengguna, pemuatan sumber atau perubahan keadaan. Acara adalah bahagian penting dalam pembangunan web, membolehkan pembangun menjadikan halaman web interaktif.

---

1. Apakah Acara DOM?

Acara DOM mewakili interaksi atau perubahan yang boleh dikesan menggunakan JavaScript. Contoh acara termasuk:

• Mengklik butang (klik)
• Menaip dalam medan input (input, keydown, keyup)
• Melayang di atas elemen (menuju tetikus, keluar tetikus)
• Menyerahkan borang (serahkan)
• Pemuatan halaman selesai (muatan)

---

2. Pendengar Acara

Pendengar acara ialah fungsi yang menunggu acara tertentu berlaku pada elemen sasaran.

Menambahkan Pendengar Acara

Gunakan kaedah addEventListener untuk melampirkan pendengar acara pada elemen.

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

Mengalih keluar Pendengar Acara

Gunakan kaedah removeEventListener untuk memisahkan pendengar acara.

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

---

3. Jenis Acara DOM

A. Peristiwa Tetikus

• klik: Menyala apabila tetikus diklik pada elemen.
• dblclick: Menyala apabila tetikus diklik dua kali.
• tetikus: Menyala apabila tetikus memasuki elemen.
• keluar tetikus: Menyala apabila tetikus meninggalkan elemen.

B. Acara Papan Kekunci

• keydown: Menyala apabila kekunci ditekan ke bawah.
• keyup: Menyala apabila kunci dilepaskan.
• tekan kekunci: Ditamatkan, gunakan keydown sebaliknya.

C. Borang Acara

• serahkan: Membakar apabila borang diserahkan.
• perubahan: Menyala apabila nilai elemen input berubah.

D. Acara Tetingkap

• muat: Menyala apabila halaman dimuatkan sepenuhnya.
• ubah saiz: Menyala apabila tetingkap penyemak imbas diubah saiznya.
• tatal: Menyala apabila halaman ditatal.

E. Acara Input

• input: Menyala apabila nilai medan input berubah.
• fokus: Menyala apabila elemen input memperoleh fokus.
• kabur: Menyala apabila elemen input kehilangan fokus.

---

4. Objek Peristiwa

Apabila peristiwa berlaku, JavaScript menyediakan objek acara yang mengandungi butiran tentang acara tersebut.

Sifat Biasa Objek Acara

• jenis: Jenis acara (cth., klik, keydown).
• sasaran: Elemen yang mencetuskan acara.
• currentTarget: Elemen yang pengendali acara dilampirkan.
• preventDefault(): Menghalang tindakan lalai acara.
• stopPropagation(): Menghentikan acara daripada disebarkan kepada elemen induk.

Contoh

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

---

5. Penyebaran Acara

Penyebaran acara menentukan susunan pengendali acara dilaksanakan.

A. Acara menggelegak

Acara bermula pada elemen sasaran dan berbuih sehingga nenek moyangnya.

function handleClick() {
  alert("Button clicked!");
}

button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

Mengklik butang akan mencetuskan kedua-dua pengendali.

B. Menangkap Acara

Acara bermula pada akar dan bergerak ke bawah ke elemen sasaran.

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

Menetapkan parameter ketiga kepada benar membolehkan penangkapan.

Menghentikan Penyebaran

Gunakan stopPropagation() untuk mengelakkan penyebaran selanjutnya.

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

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

---

6. Mewakilkan Acara

Delegasi acara memanfaatkan acara menggelegak untuk mengurus acara bagi elemen yang ditambah secara dinamik.

Contoh

element.addEventListener("click", handler, true);

---

7. Contoh Praktikal

A. Togol Keterlihatan

button.addEventListener("click", function(event) {
  event.stopPropagation();
});

B. Pengesahan Borang

document.querySelector("ul").addEventListener("click", function(event) {
  if (event.target.tagName === "LI") {
    console.log("List item clicked:", event.target.textContent);
  }
});

C. Tatal Tak Terhingga

const button = document.querySelector("button");
const content = document.querySelector(".content");

button.addEventListener("click", function() {
  content.style.display = content.style.display === "none" ? "block" : "none";
});

---

8. Ringkasan

• Acara DOM membenarkan interaksi antara pengguna dan halaman web.
• Gunakan addEventListener untuk melampirkan pengendali acara.
• Fahami objek acara dan penyebaran untuk pengurusan acara yang berkesan.
• Gunakan delegasi acara untuk prestasi yang lebih baik apabila bekerja dengan elemen dinamik.

Dengan menguasai acara DOM, anda boleh mencipta aplikasi web yang sangat interaktif dan mesra pengguna.

Hai, saya Abhay Singh Kathayat!
Saya seorang pembangun tindanan 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 Memahami Acara DOM dalam JavaScript: Panduan Komprehensif untuk Interaksi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!