DOM विशेषता परिवर्तनों पर घटनाओं को ट्रिगर करना

कई परिदृश्यों में DOM विशेषताओं में परिवर्तनों का पता लगाने की आवश्यकता होती है, जैसे कि जब किसी छवि का स्रोत बदलता है या div का HTML बदलता है सामग्री अद्यतन. इस कार्यक्षमता के लिए ब्राउज़र समर्थन समय के साथ विकसित हुआ है। इन घटनाओं में शामिल हैं:

DOMAttrModified

DOMNodeInserted

DOMNodeRemoved

• हालाँकि, DOM म्यूटेशन इवेंट के लिए ब्राउज़र समर्थन असंगत था, जिसके कारण 2012 में उनका बहिष्कार। MutationObserver DOM विशेषताओं और DOM के अन्य पहलुओं में परिवर्तनों का पता लगाने के लिए एक अधिक मजबूत और व्यापक रूप से समर्थित विधि प्रदान करता है।
• MutationObserver का उपयोग करके, आप एक पर्यवेक्षक उदाहरण बना सकते हैं और उन परिवर्तनों के प्रकार निर्दिष्ट कर सकते हैं जिनकी आप निगरानी करना चाहते हैं। DOM में कोई भी मिलान परिवर्तन होने पर पर्यवेक्षक आपको सूचित करेगा। एक पर्यवेक्षक उदाहरण कॉन्स्ट ऑब्जर्वर = नया म्यूटेशनऑब्जर्वर((म्यूटेशन) => { के लिए (उत्परिवर्तन का स्थिरांक उत्परिवर्तन) { // जांचें कि क्या उत्परिवर्तन "src" विशेषता के लिए है यदि (mutation.attributeName === "src") { // स्रोत परिवर्तन के जवाब में कुछ करें } } }); // निर्दिष्ट लक्ष्य नोड का अवलोकन करना प्रारंभ करें पर्यवेक्षक.अवलोकन(छवि, {विशेषताएँ: सत्य, विशेषताफ़िल्टर: ["src"] });
• इस उदाहरण में, पर्यवेक्षक को छवि नोड की src विशेषता देखने के लिए कॉन्फ़िगर किया गया है और निर्दिष्ट कॉलबैक को लागू करेगा जब भी वह विशेषता बदलती है।

jQuery म्यूटेशन इवेंट प्लगइन

यदि आप jQuery का उपयोग कर रहे हैं, तो आप MutationObserver के विकल्प के रूप में इसके म्यूटेशन इवेंट प्लगइन का लाभ उठा सकते हैं। यह प्लगइन DOM विशेषता परिवर्तनों को संभालने के लिए एक सरल इंटरफ़ेस प्रदान करता है और यदि आप केवल विशिष्ट विशेषता परिवर्तनों में रुचि रखते हैं तो उपयोगी हो सकता है।

$(image).on('DOMAttrModified', (event) = > { यदि (event.attrName === "src") { // स्रोत परिवर्तन के जवाब में कुछ करें } });

MutationObserver या jQuery म्यूटेशन इवेंट प्लगइन का उपयोग करके, आप प्रभावी ढंग से DOM विशेषताओं में परिवर्तनों का पता लगा सकते हैं और उन परिवर्तनों के जवाब में कस्टम क्रियाएं निष्पादित कर सकते हैं।