ইভেন্ট বাবলিং এর সময় টার্গেট এলিমেন্ট পাওয়া

ধরি আমাদের কাছে দুটি এলিমেন্ট আছে: div এবং p প্যারাগ্রাফ, যা এই div-এর ভিতরে রয়েছে:

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

আমাদের div-এর রেফারেন্স একটি ভেরিয়েবলে পাই:

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

আমাদের ট্যাগগুলিতে কিছু স্টাইল যোগ করি:

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

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

ধরি এখন div-এ একটি ক্লিক ইভেন্ট হ্যান্ডলার সংযুক্ত করা হয়েছে:

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

যেহেতু আমাদের div-এর padding আছে, সুতরাং, যখন আমরা div-এ ক্লিক করি, আমরা প্যারাগ্রাফে ক্লিক করতে পারি, অথবা আমরা সেই জায়গায় ক্লিক করতে পারি যেখানে প্যারাগ্রাফ নেই, অর্থাৎ সরাসরি div-এ।

এই ক্ষেত্রে, ক্লিক হ্যান্ডলারে this সর্বদা সেই এলিমেন্টটিকে নির্দেশ করবে, যার উপর হ্যান্ডলারটি সংযুক্ত করা হয়েছে। আমাদের ক্ষেত্রে এটি আমাদের div:

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

যাইহোক, আমরা ঠিক সেই ট্যাগটি পেতে পারি, যেখানে ইভেন্টটি ঘটেছে। এর জন্য আমরা event.target-এ কী আছে তা দেখতে পারি:

div.addEventListener('click', function(event) {
	console.log(event.target); // হয় div, নয়তো প্যারাগ্রাফ
});

শর্ত ব্যবহার করে এই দুটি বিকল্প আলাদা করা যেতে পারে:

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

div.addEventListener('click', function(event) {
	if (event.target.tagName === 'DIV') {
		console.log('ক্লিকটি সরাসরি div-এ');
	}
	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('ক্লিকটি সরাসরি div-এ');
	}
	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;
}

div-এ একটি ক্লিক ইভেন্ট হ্যান্ডলার সংযুক্ত করুন। এই হ্যান্ডলারে নির্ধারণ করুন, কোন ট্যাগে ইভেন্টটি ট্রিগার হয়েছে।

পূর্ববর্তী কাজটি পরিবর্তন করুন। এমন করুন যাতে li-এ ক্লিক করলে, এর শেষে একটি বিস্ময়বোধক চিহ্ন যোগ হয়, এবং ul-এ ক্লিক করলে কনসোলে এ সম্পর্কিত তথ্য 출력 হয়।