ဖြစ်ရပ်များ ပေါ်ပေါက်လာသည့်အခါ ပစ်မှတ်အစိတ်အပိုင်းကို ရယူခြင်း

ကျွန်ုပ်တို့တွင် အစိတ်အပိုင်းနှစ်ခု ရှိသည်ဆိုပါစို့- div နှင့် ၎င်း div အတွင်း၌ ရှိသော စာပိုဒ် p တို့ဖြစ်သည်-

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

ကျွန်ုပ်တို့၏ div အား variable တစ်ခုအတွင်း ရယူကြပါစို့-

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

ကျွန်ုပ်တို့၏ tag များကို စတိုင်များ ထည့်သွင်းပေးကြပါစို့-

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
});

သို့ရာတွင်၊ ဖြစ်ရပ်ဖြစ်ပွားခဲ့သည့် tag အတိအကျကို ကျွန်ုပ်တို့ ရယူနိုင်ပါသည်။ ထိုသို့ပြုလုပ်ရန် ကျွန်ုပ်တို့သည် 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 အပေါ်တွင် ကလစ်ဖြစ်ရပ်ကိုင်တွယ်မှုတစ်ခု ထည့်သွင်းပါ။ ဤ ဖြစ်ရပ်ကိုင်တွယ်မှုအတွင်း ဖြစ်ရပ်သည် မည်သည့် tag အတွင်း ဖြစ်ပွားခဲ့သည်ကို သတ်မှတ်ပါ။

ယခင်တာဝန်ကို ပြုပြင်မွမ်းမံပါ။ li ပေါ်သို့ ကလစ်နှိပ်သည့်အခါ၊ ၎င်း၏အဆုံးတွင် အာမေဋိတ်အမှတ်အသား ထည့်သွင်းပေးပြီး၊ ul ပေါ်သို့ ကလစ်နှိပ်သည့်အခါ console တွင် ဤအကြောင်းအရာ သတင်းအချက်အလက်ကို ထုတ်ပြပေးပါ။