تشغيل الأحداث على تغييرات سمات DOM

تتطلب العديد من السيناريوهات اكتشاف التغييرات في سمات DOM، مثل عندما يتغير مصدر الصورة أو HTML الخاص بـ div تحديثات المحتوى. لقد تطور دعم المتصفح لهذه الوظيفة مع مرور الوقت.

DOM Mutation Events (Legacy)

في الماضي، قدمت DOM Mutation Events طريقة للاستماع إلى تغييرات السمات. تضمنت هذه الأحداث:

DOMAttrModified
• DOMNodeInserted
• DOMNodeRemoved

ومع ذلك، كان دعم المتصفح لأحداث DOM Mutation غير متسق، مما أدى إلى تم إهمالها في عام 2012.

MutationObserver API كبديل لـ DOM Mutation Events، تم تقديم MutationObserver API. يوفر MutationObserver طريقة أكثر قوة ومدعومة على نطاق واسع لاكتشاف التغييرات في سمات DOM والجوانب الأخرى لـ DOM.

باستخدام MutationObserver، يمكنك إنشاء مثيل مراقب وتحديد أنواع التغييرات التي تريد مراقبتها. سوف يقوم المراقب بإعلامك عند حدوث أي تغييرات مطابقة في DOM.

إليك مثال لكيفية استخدام MutationObserver للكشف عن التغييرات في سمة مصدر الصورة:

// إنشاء مثال مراقب مراقب ثابت = جديد MutationObserver((الطفرات) => { لـ (طفرة الطفرات الثابتة) { // تحقق مما إذا كانت الطفرة للسمة "src". إذا (mutation.attributeName === "src") { // افعل شيئًا ردًا على تغيير المصدر } } }); // ابدأ بمراقبة العقدة المستهدفة المحددة Observe(image, { attributes: true, attributeFilter: ["src"] });

// 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"] });

jQuery Mutation Events Plugin

إذا كنت تستخدم jQuery، فيمكنك الاستفادة من البرنامج الإضافي Mutation Events كبديل لـ MutationObserver. يوفر هذا البرنامج المساعد واجهة مبسطة للتعامل مع تغييرات سمات DOM ويمكن أن يكون مفيدًا إذا كنت مهتمًا فقط بتغييرات سمات معينة.

$(image).on("DOMAttrModified", (event) = > { إذا (event.attrName === "src") { // افعل شيئًا ردًا على تغيير المصدر } });

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