इवेंट बबलिंग के दौरान टारगेट एलिमेंट प्राप्त करना

मान लीजिए कि हमारे पास दो एलिमेंट हैं: div और पैराग्राफ p, जो इस डिव के अंदर स्थित है:

html<div>
  <p></p>
</div>

आइए हम अपने डिव का रेफरेंस एक वेरिएबल में प्राप्त करें:

javascriptlet div = document.querySelector('div');

आइए हम अपने टैग्स को कुछ स्टाइल्स दें:

cssdiv {
  padding: 20px;
  border: 1px solid red;
}

p {
  width: 200px;
  height: 200px;
  border: 1px solid green;
}

मान लीजिए कि अब डिव पर क्लिक हैंडलर लगा हुआ है:

javascriptdiv.addEventListener('click', function() {
  console.log('click');
});

इसलिए कि हमारे डिव में padding है, तो, जब हम डिव पर क्लिक करते हैं, हम पैराग्राफ पर क्लिक कर सकते हैं, या उस जगह पर क्लिक कर सकते हैं जहाँ यह पैराग्राफ मौजूद नहीं है, यानी सीधे डिव पर।

इस स्थिति में क्लिक हैंडलर में this हमेशा उस एलिमेंट की ओर इशारा करेगा, जिस पर हैंडलर लगा हुआ है। हमारे मामले में यह हमारा डिव है:

javascriptdiv.addEventListener('click', function() {
  console.log(this); // डिव
});

हालाँकि, हम ठीक वही टैग प्राप्त कर सकते हैं, जिसमें इवेंट हुआ था। इसके लिए हम event.target में क्या है यह देख सकते हैं:

javascriptdiv.addEventListener('click', function(event) {
  console.log(event.target); // या तो डिव, या पैराग्राफ
});

इन दोनों विकल्पों को शर्तों के माध्यम से अलग किया जा सकता है:

javascriptlet div = document.querySelector('div');

div.addEventListener('click', function(event) {
  if (event.target.tagName === 'DIV') {
    console.log('क्लिक ठीक डिव पर हुआ');
  }
  if (event.target.tagName === 'P') {
    console.log('क्लिक ठीक पैराग्राफ पर हुआ');
  }
});

tagName के बजाय matches का उपयोग किया जा सकता है:

javascriptlet div = document.querySelector('div');

div.addEventListener('click', function(event) {
  if (event.target.matches('div')) {
    console.log('क्लिक ठीक डिव पर हुआ');
  }
  if (event.target.matches('p')) {
    console.log('क्लिक ठीक पैराग्राफ पर हुआ');
  }
});

html<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

cssdiv, ul, li {
  padding: 20px;
}

div {
  border: 1px solid red;
}
ul {
  border: 1px solid orange;
}
li {
  border: 1px solid green;
}