जावास्क्रिप्ट में this ऑब्जेक्ट

अब हम इवेंट हैंडलर फ़ंक्शन में उपलब्ध विशेष ऑब्जेक्ट this के साथ काम करेंगे। यह ऑब्जेक्ट उस एलिमेंट की ओर इशारा करता है जिसमें इवेंट हुआ था।

ऑब्जेक्ट this तब सुविधाजनक होता है जब वह एलिमेंट जिसमें इवेंट हुआ था, और वह एलिमेंट जिसके साथ इवेंट के परिणामस्वरूप एक्शन किए जाते हैं - वह एक ही एलिमेंट हो।

उदाहरण के लिए, यदि हमारे पास एक इनपुट है, तो हम उससे ब्लर इवेंट के लिए एक हैंडलर बांध सकते हैं और इस इवेंट के होने पर इनपुट के टेक्स्ट के साथ कुछ कर सकते हैं। आइए वर्णित कार्य करें। मान लीजिए कि हमारे पास एक इनपुट है:

html<input id="elem" value="text">

आइए इसे एक वेरिएबल elem में रेफरेंस प्राप्त करें:

javascriptlet elem = document.querySelector('#elem');

इससे blur इवेंट के लिए एक फ़ंक्शन हैंडलर बांधें:

javascriptelem.addEventListener('blur', func);

इस फ़ंक्शन func के अंदर ऑब्जेक्ट this उपलब्ध होगा, जो हमारे इनपुट की ओर इशारा करता है:

javascriptfunction func() {
  console.log(this); // हमारे एलिमेंट का रेफरेंस रखता है
}

हमारे इनपुट की value एट्रिब्यूट की सामग्री आउटपुट करें:

javascriptfunction func() {
  console.log(this.value); // एट्रिब्यूट की सामग्री आउटपुट करेंगे
}

अब, आइए इनपुट में कुछ टेक्स्ट लिखें:

javascriptfunction func() {
  this.value = '!!!';
}

अनाम फ़ंक्शन का भी उपयोग किया जा सकता है:

javascriptelem.addEventListener('blur', function() {
  this.value = '!!!';
});