JavaScript HTML DOM ပွဲများ
HTML DOM သည် JavaScript ကို HTML ဖြစ်ရပ်များကိုတုံ့ပြန်ရန်ခွင့်ပြုသည်-
အဖြစ်အပျက်များကို တုံ့ပြန်ခြင်း။
HTML ဒြပ်စင်ကို အသုံးပြုသူတစ်ဦးက နှိပ်လိုက်သည့်အခါကဲ့သို့ ဖြစ်ရပ်တစ်ခု ဖြစ်ပေါ်သည့်အခါ JavaScript ကို လုပ်ဆောင်နိုင်သည်။
အသုံးပြုသူတစ်ဦးသည် ဒြပ်စင်တစ်ခုကို နှိပ်သောအခါ ကုဒ်ကို လုပ်ဆောင်ရန်၊ HTML ဖြစ်ရပ်တစ်ခု၏ ရည်ညွှန်းချက်တွင် JavaScript ကုဒ်ကို ထည့်ပါ-
onclick=JavaScript
HTML ဖြစ်ရပ်များ ဥပမာများ-
- အသုံးပြုသူသည် mouse ကိုနှိပ်သောအခါ
- ဝဘ်စာမျက်နှာတစ်ခု တင်သည့်အခါ
- ပုံတစ်ပုံတင်ပြီးသောအခါ
- မောက်စ်သည် ဒြပ်စင်တစ်ခုအပေါ်သို့ ရွေ့လျားသောအခါ
- ထည့်သွင်းမှုအကွက်ကို ပြောင်းလဲသည့်အခါ
- HTML ဖောင်တစ်ခုတင်သောအခါ
- အသုံးပြုသူတစ်ဦးသည် သော့ကိုရိုက်သောအခါ
<h1>
ဤဥပမာတွင်၊ အသုံးပြုသူတစ်ဦးက ၎င်းကိုနှိပ်သောအခါတွင် ဒြပ်စင် ၏အကြောင်းအရာ သည် ပြောင်းလဲသွားသည်-
ဥပမာ
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
</body>
</html>
ဤဥပမာတွင်၊ ဖြစ်ရပ်ကိုင်တွယ်သူထံမှ လုပ်ဆောင်ချက်ကို ခေါ်သည်-
ဥပမာ
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">Click on this text!</h1>
<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>
</body>
</html>
HTML Event Attributes
HTML ဒြပ်စင်များသို့ ဖြစ်ရပ်များကို သတ်မှတ်ရန် သင်သည် အဖြစ်အပျက် ရည်ညွှန်းချက်များကို အသုံးပြုနိုင်သည်။
ဥပမာ
onclick ဖြစ်ရပ်တစ်ခုကို ခလုတ်ဒြပ်စင်တစ်ခုသို့ သတ်မှတ်ပါ-
<button onclick="displayDate()">Try it</button>
အထက်ဖော်ပြပါ ဥပမာ displayDate
တွင် ခလုတ်ကို နှိပ်လိုက်သောအခါတွင် အမည်ရှိသော လုပ်ဆောင်ချက်ကို လုပ်ဆောင်မည်ဖြစ်သည်။
HTML DOM ကို အသုံးပြု၍ ဖြစ်ရပ်များကို သတ်မှတ်ပါ။
HTML DOM သည် သင့်အား JavaScript ကို အသုံးပြု၍ အဖြစ်အပျက်များကို HTML အစိတ်အပိုင်းများသို့ ပေးဆောင်ရန် ခွင့်ပြုသည်-
ဥပမာ
onclick ဖြစ်ရပ်တစ်ခုကို ခလုတ်ဒြပ်စင်တစ်ခုသို့ သတ်မှတ်ပါ-
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
အထက်ဖော်ပြပါ ဥပမာတွင်၊ အမည်ရှိသော လုပ်ဆောင်ချက်ကို displayDate
HTML ဒြပ်စင်တစ်ခုထံ တာဝန်ပေးအပ်သည် id="myBtn"
။
ခလုတ်ကိုနှိပ်လိုက်သောအခါ လုပ်ဆောင်ချက်ကို လုပ်ဆောင်မည်ဖြစ်သည်။
onload နှင့် onunload ပွဲများ
အသုံးပြုသူသည် စာမျက်နှာသို့ ဝင်ရောက်သည့်အခါ သို့မဟုတ် ထွက်ခွာသည့်အခါတွင် ဖြစ်ရပ်များနှင့် အဖြစ်အပျက်များကို အစပျိုး သည် onload
။onunload
လည်ပတ်သူ၏ဘရောက်ဆာအမျိုးအစားနှင့် ဘရောက်ဆာဗားရှင်းကို စစ်ဆေးရန်နှင့် အချက်အလက်များအပေါ်အခြေခံ၍ ဝဘ်စာမျက်နှာ၏ သင့်လျော်သောဗားရှင်းကို တင်ရန် ဤ onload
ဖြစ်ရပ်ကို အသုံးပြုနိုင်သည်။
ကွတ် ကီးများ onload
နှင့် onunload
ကိုင်တွယ်ရန် အဖြစ်အပျက်များကို အသုံးပြုနိုင်သည်။
ဥပမာ
<body onload="checkCookies()">
ပြောင်းလဲမှုဖြစ်စဉ်
onchange
ဖြစ်ရပ်ကို ထည့်သွင်းသည့်အကွက်များကို အတည်ပြုခြင်းနှင့် ပေါင်းစပ်အသုံးပြုလေ့ရှိသည် ။
အောက်တွင် onchange ကိုအသုံးပြုပုံဥပမာတစ်ခုဖြစ်သည်။ အသုံးပြုသူတစ်ဦးသည် ထည့်သွင်းအကွက် တစ်ခု၏ upperCase()
အကြောင်းအရာကို ပြောင်းလဲသည့်အခါ လုပ်ဆောင်ချက်ကို ခေါ်ပါမည်။
ဥပမာ
<input type="text" id="fname"
onchange="upperCase()">
onmouseover နှင့် onmouseout ပွဲများ
HTML ဒြပ်စင်တစ်ခုကို အသုံးပြုသူ မောက် စ ်ဖြင့် သို့မဟုတ် အပြင်သို့ ရောက်သွားသောအခါ လုပ်ဆောင်ချက်တစ်ခု စတင်ရန် onmouseover
နှင့် onmouseout
အဖြစ်အပျက်များကို အသုံးပြုနိုင်သည်။
onmousedown၊ onmouseup နှင့် Events ကိုနှိပ်ပါ။
အဆိုပါ onmousedown
, onmouseup
နှင့် onclick
အဖြစ်အပျက်များသည် မောက်စ်ကလစ်နှိပ်ခြင်း၏ အစိတ်အပိုင်းအားလုံးဖြစ်သည်။ ပထမဦးစွာ မောက်စ်ခလုတ်ကို နှိပ်လိုက်သောအခါတွင်၊ မောက်စ်ချသည့် ဖြစ်ရပ်ကို အစပျိုးလိုက်သည်၊ ထို့နောက် မောက်စ်ခလုတ်ကို လွှတ်လိုက်သောအခါ၊ onmouseup ဖြစ်ရပ်ကို အစပျိုးလိုက်သည်၊ နောက်ဆုံးတွင်၊ မောက်စ်နှိပ်ခြင်းပြီးမြောက်သောအခါ၊ onclick ဖြစ်ရပ်ကို အစပျိုးလိုက်ပါသည်။
နောက်ထပ် ဥပမာများ
အသုံးပြုသူတစ်ဦးသည် မောက်စ်ခလုတ်ကို ဖိထားသည့်အခါ ပုံတစ်ခုပြောင်းပါ။
စာမျက်နှာကို တင်ပြီးသောအခါတွင် သတိပေးချက်ဘောက်စ်ကို ပြသပါ။
အာရုံစူးစိုက်မှုရရှိသောအခါ ထည့်သွင်းသည့်အကွက်၏ နောက်ခံအရောင်ကို ပြောင်းပါ။
ကာဆာသည် ၎င်းအပေါ်မှ ရွှေ့သည့်အခါ ဒြပ်စင်တစ်ခု၏ အရောင်ကို ပြောင်းပါ။
HTML DOM Event Object ရည်ညွှန်းချက်
HTML DOM ဖြစ်ရပ်များအားလုံး၏စာရင်းအတွက်၊ ကျွန်ုပ်တို့၏ပြီးပြည့်စုံသော HTML DOM Event Object Reference ကိုကြည့် ပါ။