Bagaimana untuk Mencetuskan Peristiwa Apabila Atribut DOM Berubah?

Pengendalian Peristiwa Perubahan Atribut

Adakah mungkin untuk mengaktifkan acara apabila atribut DOM berubah? Contohnya, apabila sumber imej atau HTML dalaman bahagian diubah suai?

Peristiwa Mutasi menyediakan penyelesaian kepada isu ini. Walaupun sokongan penyemak imbas untuk acara ini terhad, ia menawarkan cara untuk memantau perubahan atribut.

Secara khusus, anda boleh menggunakan antara muka MutationObserver sebagai pengganti Peristiwa Mutasi. MutationObserver menyediakan kaedah yang lebih standard dan boleh dipercayai untuk memerhati perubahan DOM, termasuk pengubahsuaian atribut.

Begini cara anda boleh menggunakan MutationObserver untuk mencetuskan peristiwa tersuai apabila atribut berubah:

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === 'attributes') {
      const element = mutation.target;
      const attributeName = mutation.attributeName;
      const oldValue = mutation.oldValue;
      const newValue = mutation.newValue;

      // Trigger custom event with relevant information
      element.dispatchEvent(new CustomEvent('attributeChanged', {
        detail: {
          attributeName,
          oldValue,
          newValue
        }
      }));
    }
  });
});

// Observe the DOM element for attribute changes
observer.observe(document.querySelector('#myElement'), { attributes: true });

Dengan menggunakan MutationObserver, anda boleh menjejaki perubahan atribut dengan berkesan dan memulakan acara tersuai dengan sewajarnya, membolehkan anda bertindak balas kepada pengubahsuaian DOM dinamik.

Atas ialah kandungan terperinci Bagaimana untuk Mencetuskan Peristiwa Apabila Atribut DOM Berubah?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!