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

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

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

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

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

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

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

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

elem.addEventListener('blur', func);

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

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

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

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

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

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

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

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

एक इनपुट दिया गया है। इस इनपुट द्वारा फोकस प्राप्त करने पर इसमें नंबर 1 लिखें, और फोकस खोने पर - नंबर 2 लिखें। फ़ंक्शन हैंडलर के अंदर इनपुट को संबोधित करने के लिए ऑब्जेक्ट this का उपयोग करें।

एक बटन दी गई है, जिसका मान नंबर 1 है। ऐसा करें कि इस बटन पर क्लिक करने पर इसका मान हर बार एक से बढ़ जाए।