JavaScript တွင် အထွေထွေ အဖြစ်အပျက် ကိုယ်စားပြုခြင်း

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

ကျွန်ုပ်တို့၏ကုဒ်၏ အားနည်းချက်သည် li အတွင်း၌ နှစ်ထပ်ထည့်ထားသော tag များ ရှိသည့်အခါတွင် ပေါ်လာပါမည်။ ဤကိစ္စတွင် ၎င်းတို့မှာ i tag များ ဖြစ်ပါစေ။

<ul>
	<li>item <i>ထောင်ရစ်</i> item</li>
	<li>item <i>ထောင်ရစ်</i> item</li>
	<li>item <i>ထောင်ရစ်</i> item</li>
	<li>item <i>ထောင်ရစ်</i> item</li>
	<li>item <i>ထောင်ရစ်</i> item</li>
</ul>

ဤကိစ္စတွင် i tag အပေါ် နှိပ်ခြင်းသည် i tag ၏ အဆုံး တွင် အာမေဋိတ်အမှတ်အသား ထည့်သွင်းခြင်းဆီသို့ ဦးတည်စေပြီး၊ ကျွန်ုပ်တို့ မျှော်လင့်ထားသည့်အတိုင်း li tag တွင် မဟုတ်ပါ - အဘယ့်ကြောင့်ဆိုသော် event.target သည် အဖြစ်အပျက် ဖြစ်ပွားခဲ့သော tag အတိအကျကို ရောက်ရှိသွားသောကြောင့် ဖြစ်သည်။

ဤပြဿနာကို closest နည်းလမ်းဖြင့် ဖြေရှင်းနိုင်ပါသည်။

list.addEventListener('click', function(event) {
	let li = event.target.closest('li');
	
	if (li) {
		li.innerHTML = li.innerHTML + '!';
	}
});

ဖော်ပြပါ အဖြေကို ပြန်လုပ်ကြည့်ပါ။