Bagaimanakah saya boleh mengesan Perubahan Atribut dalam DOM?-tutorial js-php.cn

Bagaimanakah saya boleh mengesan Perubahan Atribut dalam DOM?

Patricia Arquette

Lepaskan： 2024-10-26 16:59:03

asal

546 orang telah melayarinya

How can I detect Attribute Changes in the DOM?

Mengesan Perubahan Atribut dalam DOM

Soalan:

Adakah mungkin untuk memulakan acara, seperti acara tersuai, apabila atribut elemen HTML berubah? Lebih khusus lagi, apabila atribut src elemen imej () atau atribut HTML dalaman bagi elemen bahagian (

) diubah suai?

Jawapan:

Peristiwa Mutasi (Ditamatkan)

Secara sejarah, Peristiwa Mutasi DOM digunakan untuk memantau perubahan atribut. Walau bagaimanapun, ia telah ditamatkan sejak 2012. Penggantian mereka, MutationObserver, disyorkan.

MutationObserver

MutationObserver ialah API lanjutan yang membolehkan anda melihat perubahan pada DOM . Ia menyediakan kawalan yang lebih halus daripada Peristiwa Mutasi dan membolehkan anda menjejaki elemen, mutasi dan struktur pokok tertentu.

Contoh denganMutationObserver:

<code class="javascript">// Create a new MutationObserver instance
const observer = new MutationObserver((mutationsList) => {
  for (const mutation of mutationsList) {
    // Check if the mutation is an attribute change
    if (mutation.type === "attributes") {
      console.log(`Attribute changed on ${mutation.target.nodeName}`);
    }
  }
});

// Start observing the document body for attribute changes
observer.observe(document.body, { attributes: true });</code>

Salin selepas log masuk

Pemalam Acara jQuery

Pemalam Peristiwa Mutasi untuk jQuery juga boleh digunakan untuk mengesan perubahan atribut. Ia menyediakan API yang lebih mudah digunakan untuk kes penggunaan asas.

Contoh dengan Pemalam Acara Mutasi jQuery:

<code class="javascript">$("img").on("attrchange", (e) => {
  console.log(`Image src changed to ${e.target.src}`);
});</code>

Salin selepas log masuk

Nota:

Sokongan penyemak imbas untuk Acara Mutasi DOM berbeza-beza. Anda sentiasa disyorkan untuk menyemak keserasian sebelum bergantung pada fungsi ini.

Atas ialah kandungan terperinci Bagaimanakah saya boleh mengesan Perubahan Atribut dalam DOM?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!