JavaScript में Event ऑब्जेक्ट में इवेंट एलिमेंट

Event ऑब्जेक्ट हमें उस एलिमेंट को प्राप्त करने की भी अनुमति देता है जहाँ इवेंट हुआ था। यह एलिमेंट target प्रॉपर्टी में समाहित होता है। यदि यह एलिमेंट this में पहले से ही है तो इसकी आवश्यकता क्यों है?

बात यह है कि वास्तव में this हमेशा उस एलिमेंट को संदर्भित करता है, जिससे इवेंट बाइंड किया गया था, जबकि target प्रॉपर्टी - वह एलिमेंट है, जिस पर वास्तव में क्लिक हुआ था। यह वास्तविक एलिमेंट this के साथ मेल खा सकता है, या नहीं भी खा सकता है।

आइए एक उदाहरण देखें। मान लीजिए कि हमारे पास एक div है, और उसके अंदर एक पैराग्राफ है:

<div id="elem">
	<p>text</p>
</div>

आइए div से एक इवेंट बाइंड करें, लेकिन पैराग्राफ पर क्लिक करें। जाहिर है, पैराग्राफ पर क्लिक एक साथ div पर भी क्लिक है, क्योंकि पैराग्राफ हमारे div के अंदर समाहित है।

वर्णित मामले में, target प्रॉपर्टी में वह अंतिम टैग समाहित होगा, जिसमें इवेंट हुआ था - यानी पैराग्राफ, न कि div। आइए इसे सत्यापित करें:

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // हमारा पैराग्राफ आउटपुट करेगा
	console.log(this);         // हमारा div आउटपुट करेगा
});

मान लीजिए आपके पास li टैग वाली एक ul सूची है:

ul {
	padding: 30px;
	border: 1px solid red;
}
li {
	list-style-type: none;
	margin-bottom: 20px;
	border: 1px dashed black;
}

<ul id="elem">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

ul टैग से एक क्लिक हैंडलर बाइंड करें। इस हैंडलर में, tagName प्रॉपर्टी का उपयोग करके जांचें कि क्लिक किस टैग पर हुआ था। यदि क्लिक li टैग पर हुआ था - तो उस टैग के टेक्स्ट के अंत में एक विस्मयादिबोधक चिह्न जोड़ें। और यदि क्लिक ul टैग पर हुआ था - तो इसके बारे में जानकारी कंसोल में आउटपुट करें।