JavaScript ရှိ Event အရာဝတ္ထုထဲက ဖြစ်ရပ်ဒြပ်စင်

Event အရာဝတ္ထုသည် ဖြစ်ပွားခဲ့သည့် ဒြပ်စင်ကိုလည်း ရယူခွင့်ပြုပါသည်။ ထို ဒြပ်စင်သည် target ဂုဏ်သတ္တိတွင် ပါဝင်သည်။ ဤဒြပ်စင်သည် this တွင် ပါဝင်နေပါက ဤအရာကို မည်သည့်အတွက် လိုအပ်သနည်း။

အမှန်တကယ်မှာ this သည် အမြဲတမ်း ဖြစ်ရပ်ကို ချိတ်ဆက်ခဲ့သည့် ဒြပ်စင်ကို ပါဝင်စေပြီး၊ target ဂုဏ်သတ္တိက - တကယ်တမ်း ကလစ်နှိပ်ခဲ့သည့် ဒြပ်စင်ကို ဖြစ်ပါသည်။ ဤတကယ့်ဒြပ်စင်သည် this နှင့် ကိုက်ညီနိုင်ပြီး၊ မကိုက်ညီသည်လည်း ဖြစ်နိုင်သည်။

ဥပမာတစ်ခုဖြင့် ကြည့်ကြပါစို့။ ကျွန်ုပ်တို့တွင် div တစ်ခု ရှိပြီး ၎င်းအတွင်းတွင် စာပိုဒ်တစ်ခု ရှိသည်။

<div id="elem">
	<p>စာသား</p>
</div>

div သို့ ဖြစ်ရပ်တစ်ခုကို ချိတ်ဆက်ပြီး၊ စာပိုဒ်ကို ကလစ်နှိပ်ပါ။ ထင်ရှားသည်မှာ စာပိုဒ်ကို ကလစ်နှိပ်ခြင်းသည် div ကို ကလစ်နှိပ်ခြင်းနှင့် တစ်ပြိုင်နက် ဖြစ်သည်၊ အဘယ်ကြောင့်ဆိုသော် စာပိုဒ်သည် ကျွန်ုပ်တို့၏ div ထဲတွင် ပါဝင်နေသောကြောင့်ဖြစ်သည်။

ဖော်ပြခဲ့သည့် အခြေအနေတွင် target ဂုဏ်သတ္တိသည် ဖြစ်ရပ်ဖြစ်ပွားခဲ့သည့် နောက်ဆုံး tag ကို ပါဝင်စေမည် - ဆိုလိုသည်မှာ စာပိုဒ်ကို၊ div ကို မဟုတ်ပါ။ ဤအချက်ကို သေချာအောင်လုပ်ကြည့်ကြပါစို့။

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

elem.addEventListener('click', function(event) {
	console.log(event.target); // ကျွန်ုပ်တို့၏ စာပိုဒ်ကို ပြသမည်
	console.log(this);         // ကျွန်ုပ်တို့၏ div ကို ပြသမည်
});

သင့်တွင် ul စာရင်းတစ်ခု ရှိပြီး ၎င်းတွင် li tag များ ရှိသည်။

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

<ul id="elem">
	<li>စာသား</li>
	<li>စာသား</li>
	<li>စာသား</li>
	<li>စာသား</li>
	<li>စာသား</li>
</ul>

ul tag သို့ ကလစ်နှိပ်မှု လုပ်ဆောင်ချက်ကို ချိတ်ဆက်ပါ။ ဤလုပ်ဆောင်ချက်အတွင်း tagName ဂုဏ်သတ္တိကို အသုံးပြု၍ မည်သည့် tag ကို ကလစ်နှိပ်ခဲ့သည်ကို စစ်ဆေးပါ။ အကယ်၍ ကလစ်နှိပ်မှုသည် li tag ကို ဖြစ်ခဲ့လျှင် - ထို tag ၏ စာသားအဆုံးတွင် အာမေဋိတသင်္ကေတကို ထည့်သွင်းပါ။ သို့သော် အကယ်၍ ကလစ်နှိပ်မှုသည် ul tag ကို ဖြစ်ခဲ့လျှင် - ဤအချက်အလက်ကို console တွင် ပြသပါ။