Cara Mengesan dan Membalas Perubahan Atribut DOM: Kaedah MutationObserver vs. Legasi?

Mencetuskan Peristiwa pada Perubahan Atribut DOM

Banyak senario memerlukan pengesanan perubahan dalam atribut DOM, seperti apabila sumber imej berubah atau HTML div kemas kini kandungan. Sokongan penyemak imbas untuk fungsi ini telah berkembang dari semasa ke semasa.

Peristiwa Mutasi DOM (Legasi)

Pada masa lalu, Peristiwa Mutasi DOM menyediakan cara untuk mendengar perubahan atribut. Peristiwa ini termasuk:

• DOMAttrModified
• DOMNodeInserted
• DOMNodeRemoved

Walau bagaimanapun, sokongan penyemak imbas untuk DOM Mutation Events tidak konsisten, yang membawa kepada tidak konsisten penamatan mereka pada tahun 2012.

MutationObserver API

Sebagai pengganti DOM Mutation Events, MutationObserver API telah diperkenalkan. MutationObserver menawarkan kaedah yang lebih teguh dan disokong secara meluas untuk mengesan perubahan dalam atribut DOM dan aspek lain DOM.

Menggunakan MutationObserver, anda boleh membuat contoh pemerhati dan menentukan jenis perubahan yang anda ingin pantau. Pemerhati akan memberitahu anda apabila sebarang perubahan padanan berlaku dalam DOM.

Berikut ialah contoh cara anda boleh menggunakan MutationObserver untuk mengesan perubahan pada atribut sumber imej:

<code class="javascript">// Create an observer instance
const observer = new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    // Check if the mutation is for the "src" attribute
    if (mutation.attributeName === "src") {
      // Do something in response to the source change
    }
  }
});

// Start observing the specified target node
observer.observe(image, { attributes: true, attributeFilter: ["src"] });</code>

Dalam contoh ini , pemerhati dikonfigurasikan untuk menonton atribut src nod imej dan akan menggunakan panggilan balik yang ditentukan apabila atribut itu berubah.

Pemalam Peristiwa Mutasi jQuery

Jika anda' menggunakan jQuery, anda boleh memanfaatkan pemalam Mutation Events sebagai alternatif kepada MutationObserver. Pemalam ini menyediakan antara muka yang dipermudahkan untuk mengendalikan perubahan atribut DOM dan boleh berguna jika anda hanya berminat dengan perubahan atribut tertentu.

<code class="javascript">$(image).on("DOMAttrModified", (event) => {
  if (event.attrName === "src") {
    // Do something in response to the source change
  }
});</code>

Dengan menggunakan MutationObserver atau pemalam jQuery Mutation Events, anda boleh mengesan perubahan dengan berkesan dalam atribut DOM dan laksanakan tindakan tersuai sebagai tindak balas kepada perubahan tersebut.

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