Cara Mengesan dan Membalas Perubahan Atribut DOM: Peristiwa Mutasi lwn. MutationObserver

Pencetusan Peristiwa Perubahan Atribut DOM

Dalam pembangunan web, pemantauan perubahan pada atribut DOM adalah penting untuk aplikasi web dinamik. Peristiwa Mutasi menyediakan mekanisme untuk bertindak balas terhadap perubahan ini. Walau bagaimanapun, pada masa ini ia ditamatkan, digantikan dengan API MutationObserver.

Peristiwa Mutasi Ditamatkan:

Pelayar lama menyokong Peristiwa Mutasi, yang membenarkan pembangun mengendalikan perubahan DOM melalui khusus jenis acara seperti "DOMSubtreeModified." Walau bagaimanapun, peristiwa ini tidak lagi dianggap amalan terbaik.

Menggunakan MutationObserver:

Sebaliknya, pendekatan moden untuk mengesan perubahan atribut DOM ialah menggunakan API MutationObserver. Ciri asli penyemak imbas ini menyediakan cara untuk melihat perubahan DOM dan mencetuskan panggilan balik apabila atribut atau sifat tertentu berubah.

Contoh Penggunaan:

Untuk mencetuskan acara apabila IMG perubahan atribut src, anda boleh menggunakan kod berikut:

<code class="javascript">const img = document.querySelector('img');
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === 'src') {
      // Custom event handled here
      dispatchEvent(new CustomEvent('imageSrcChanged', { detail: mutation.newValue }));
    }
  });
});
observer.observe(img, { attributes: true });</code>

Sebagai alternatif, anda boleh menggunakan perpustakaan seperti pemalam Peristiwa Mutasi untuk jQuery untuk memudahkan pelaksanaan peristiwa mutasi DOM, memastikan keserasian dengan pelayar lama sambil mengambil kesempatan daripada API MutationObserver untuk pelayar moden.

Atas ialah kandungan terperinci Cara Mengesan dan Membalas Perubahan Atribut DOM: Peristiwa Mutasi lwn. MutationObserver. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!