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

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

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

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

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

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

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

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

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

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

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