Memahami Acara DOM

Peristiwa DOM ialah perkara yang menjadikan halaman web interaktif. Menggunakan acara DOM ialah perkara yang membuatkan halaman klik atau borang diserahkan, ia membolehkan pembangun mencipta pengalaman pengguna yang menarik.

Sesetengah contoh Acara DOM ialah apabila pengguna mengklik tetikus, apabila halaman web telah dimuatkan, apabila imej telah dimuatkan, apabila borang HTML diserahkan dan apabila pengguna menekan kekunci.

Dalam artikel ini, kami akan memudahkan konsep utama dalam Acara DOM dan meneroka cara mengendalikannya.

1. addEventListener

addEventListener, melampirkan pengendali acara pada elemen, ia membolehkan anda menentukan cara elemen bertindak balas terhadap interaksi pengguna ke halaman.

Contoh: Kod di bawah menambah acara 'klik' untuk memaparkan butiran koktel apabila imej diklik.

`img.addEventListener('click', () => handleClick(cocktail));`

2. querySelector

querySelector, membolehkan anda memilih elemen menggunakan pemilih seperti CSS. Ini salah satu cara yang paling serba boleh untuk menyasarkan elemen.

Contoh: Kod ini mencipta bahagian yang boleh dilipat pada halaman web. document.querySelectorAll sedang memilih semua elemen h3 pada halaman web dan mengembalikan NodeList bagi semua elemen yang sepadan.

const setupCollapsibles = () => {
  const collapsibles = document.querySelectorAll('.collapsible h3');

3. getElementById dan getElementsByClassName

getElementById menyasarkan satu elemen dengan id uniknya.

Begitu juga, getElementsByClassName memilih semua elemen dengan kelas tertentu dan mengembalikannya sebagai koleksi.

Contoh: Di bawah, getElementById mencari elemen dengan atribut idnya dalam dokumen HTML.

Ia digunakan di sini untuk mengakses input borang tertentu, nama baharu, bahan baharu, imej baharu, resipi baharu dan mendapatkan semula nilainya.

Nilai ini kemudiannya disimpan dalam sifat objek Koktel baharu yang ditakrifkan dengan const.

Dengan cara ini, apabila pengguna menyerahkan borang untuk mencipta koktel baharu, ia disimpan secara berstruktur di dalam objek Koktel baharu.

const newCocktail = {
      name: document.getElementById('new-name').value,
      ingredients: document.getElementById('new-ingredients').value.split(', '),
      image: document.getElementById('new-image').value,
      recipe: document.getElementById('new-recipe').value,
    }; 

4. DOMContentLoaded

Acara DOMContentLoaded memastikan JavaScript anda berjalan hanya selepas DOM dimuatkan sepenuhnya, menghalang ralat daripada cuba mengakses elemen sebelum ia tersedia.

Contoh: DOMContentLoaded, ialah peristiwa yang berlaku apabila dokumen HTML awal telah dimuatkan dan dihuraikan sepenuhnya, tanpa menunggu lembaran gaya, imej atau sumber luaran lain dimuatkan sepenuhnya.

Ia memastikan bahawa DOM dibina sepenuhnya dan boleh diakses, supaya anda boleh berinteraksi dengan selamat dengan elemen dalam HTML, seperti menambah pendengar acara atau memanipulasi DOM.

Dalam kod di bawah, penyemak imbas memberitahu anda, bahawa dokumen itu kini tersedia dan pengguna boleh mula berinteraksi dengannya.

document.addEventListener('DOMContentLoaded', () => {
  setupEditListener();
  setupDeleteListener();
});

Nota Akhir

Acara DOM adalah asas dalam menjadikan halaman web interaktif dan menarik untuk pengguna. Dengan memahami dan menggunakan kaedah teras seperti addEventListener, querySelector, getElementById dan getElementsByClassName, anda boleh mencipta antara muka pengguna dinamik yang bertindak balas kepada klik, penyerahan borang dan banyak lagi.

Selain itu, acara DOMContentLoaded memastikan bahawa skrip anda dilaksanakan hanya selepas DOM dimuatkan sepenuhnya, menghalang kemungkinan ralat dan memastikan interaksi pengguna yang lancar.

Ringkasnya, acara DOM membolehkan anda:

• Lampirkan pengendali acara dengan addEventListener untuk interaktiviti responsif.

• Pilih elemen dengan querySelector atau getElementById untuk mengemas kini kandungan secara dinamik.

• Urus tindakan yang dicetuskan oleh peristiwa berdasarkan input pengguna, seperti penyerahan borang.

• Pastikan skrip anda berjalan pada masa yang betul menggunakan DOMContentLoaded.

Dengan teknik ini, anda boleh mengubah halaman web statik kepada pengalaman interaktif yang meningkatkan penglibatan pengguna.

Atas ialah kandungan terperinci Memahami Acara DOM. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!