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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

let 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 का उपयोग किया जा सकता है:

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

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

निम्नलिखित एलिमेंट दिए गए हैं:

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

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

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

डिव पर क्लिक हैंडलर लगाएं। इस हैंडलर में पहचानें, कि किस टैग में इवेंट ट्रिगर हुआ है।

पिछले कार्य को संशोधित करें। ऐसा करें कि li पर क्लिक करने पर, उसके अंत में एक विस्मयादिबोधक चिह्न जुड़ जाए, और ul पर क्लिक करने पर कंसोल में इसकी जानकारी प्रिंट हो।