JavaScript တွင် ကွင်းဆက်ဖြင့် event handler များ တပ်ဆင်ခြင်း

ယခင်သင်ခန်းစာတွင် ကွင်းဆက်အတွင်း element အသစ်များ ဖန်တီးနည်းကို သင်ကြားခဲ့ပြီး ဖြစ်ပါသည်။ ယခု element အသစ်များ ဖန်တီးသည့်အခါ event handler များ တပ်ဆင်နည်းကို လေ့လာကြပါစို့။

ကျွန်ုပ်တို့၌ အောက်ပါအတိုင်း parent div တစ်ခု ရှိသည်ဆိုပါစို့။

<div id="parent"></div>

ကျွန်ုပ်တို့၏ div အတွင်းသို့ 9 ခုမျှသော စာပိုဒ် အသစ်များကို ထည့်သွင်းပေးမည့် ကွင်းဆက်တစ်ခုကို အလုပ်လုပ်စေပြီး ၎င်းတို့အပေါ်တွင် ကလစ်နှိပ်သည့် event handler များ တပ်ဆင်ကြပါစို့။

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

for (let i = 1; i <= 9; i++) {
	let p = document.createElement('p');
	p.textContent = '!';
	
	// ကလစ်နှိပ်သည့် event handler ကို တပ်ဆင်ခြင်း။
	p.addEventListener('click', function() {
		console.log(this.textContent);
	});
	
	parent.appendChild(p);
}

Div တစ်ခု ပေးထားသည်။ ကျွန်ုပ်တို့၏ div အတွင်းသို့ 5 ခုမျှသော input အသစ်များ ထည့်သွင်းပေးမည့် ကွင်းဆက်တစ်ခုကို အလုပ်လုပ်စေပါ။ စာပိုဒ်တစ်ခုလည်း ပေးထားသည်ဆိုပါစို့။ input အသစ် တစ်ခုစီသည် focus ပြုတ်သွားသည့်အခါ ၎င်း၏ စာသားကို ထိုစာပိုဒ်အတွင်း �ေးသားစေရန် ပြုလုပ်ပါ။