Understanding Script Events and Handlers

JavaScript ကို ထည့္ေတာ့မယ္ဆုိရင္ JavaScript ဟာ ဘယ္လို အလုပ္လုပ္တယ္ဆုိတာကို သိဖုိ႕လိုပါတယ္။ JavaScript ဟာ ပံုမွန္အားျဖင့္ webpage တက္လာတာနဲ႕ အလုပ္လုပ္ပါတယ္။ တခ်ဳိ႕ေတြကေတာ့ action တစ္ခုခု ရိွမွသာ အလုပ္လုပ္တာေတြရိွပါတယ္။ web developer အေနနဲ႕ script ေတြကို ဘယ္လို အလုပ္လုပ္ေစခ်င္လဲဆိုတာကို ေရးသားထားေပးဖုိ႕ လိုပါတယ္။

Script Events

သို႕ေပမယ့္ ကၽြန္ေတာ္တို႕ေတြဟာ button click လုပ္လုိက္တဲ့ အခါ ဒါမွမဟုတ္ ပံုေပၚကို mouse ေရာက္သြားတဲ့အခါမွသာ အလုပ္လုပ္ေစခ်င္တဲ့အခါေတြမွာ သူနဲ႕ သက္ဆိုင္ရာ event ေတြမွာ ေရးသားထားေပးရပါတယ္။ JavaScript events action ေတြဟာ web page ကို အသံုးျပဳေနတဲ့ အခ်ိန္မွာ အလုပ္လုပ္ေနပါတယ္။ ဥပမာ။။ button ကို ႏိွပ္လိုက္ရင္ alert ျပတာမ်ဳိးေပါ့။ mouse event အတြက္ကေတာ့ mouse ေရႊ႕လိုက္တဲ့အခါမွာ position ဘယ္ေနရာမွာ ရိွလဲဆိုတာကို သိႏိုင္ဖုိ႕အတြက္ပါ။ ေနာက္ျပီး keyboard event ေတြအတြက္ key တစ္ခုခု ႏိွပ္လိုက္တိုင္း ဘယ္ စာလံုးကို ႏိွပ္တယ္ဆုိတာကို သိႏိုင္ပါတယ္။

Event Handlers

<img src="dog.png" onclick="bark()">
<img src="cat.png" onmouseover="purr()">

Event handlers ကေတာ့ event တစ္ခု ထဲေရာက္လာျပီဆုိရင္ ဘယ္ function ကို သြားေခၚမလဲဆိုတာကို ေရးသားထားေပးရပါတယ္။ အထက္ပါ code မွာ ဆုိရင္ dog.png ပံုေလးကို ႏိွပ္လိုက္တဲ့ အခါမွာ onclick event ကို ေရာက္လာပါတယ္။ အဲဒီအခါ handler က bark() function ျဖစ္ေနတဲ့အတြက္ bark() ကို လွမ္းေခၚလိုက္ပါတယ္။

ေနာက္ထပ္ ဥပမာေလး ၾကည့္ရေအာင္။

<!DOCTYPE html>
<html>
<head>
  <title>Sample</title>
  <script>
  function showAlert()
  {
    alert('Clicked');
  }
  </script>
</head>
<body>
  <img src="world.png" onclick="showAlert();">
</body>
</html>

ဒီ code ေလးမွာဆုိရင္ world.png ပံုေလးကို ႏိွပ္လိုက္တာနဲ႕ alert box ေလးတက္လာတာကို ေတြ႕ရပါလိမ့္မယ္။

Event Handler	Action
onload	browser က page ကို load ျဖစ္တဲ့အခ်ိန္ တက္လာတဲ့ event
onunload	Browser က page ကေန ထြက္သြားတဲ့ အခါမွာ ေခၚတဲ့ event
onmouseover	element ေပၚမွာ mouse တင္လုိက္တဲ့ အခါ ေရာက္လာတဲ့ event
onmousedown	mouse ခလုတ္ ႏိွပ္လိုက္တဲ့ အခ်ိန္ ေရာက္လာတဲ့ event
onmouseup	mouse ခလုတ္ ႏိွပ္ျပီး လႊတ္လိုက္တဲ့ အခ်ိန္ ေရာက္လာတဲ့ event
onmousemove	mouse ေရႊ႕လိုက္တဲ့အခ်ိန္အတြက္
onmouseout	element ကေန mouse ထြက္သြားတဲ့ အခ်ိန္
onclick	click ႏိွပ္လိုက္တဲ့ အခါမွာ ေရာက္လာတဲ့ event
ondblclick	double click ႏိွပ္လိုက္တဲ့ အခါမွာ ေရာက္လာတဲ့ event
onkeypress	keyboard ကေန key ကို ဖိျပီး လႊတ္လိုက္တဲ့ အခ်ိန္မွာ ေရာက္လာတဲ့ event
onkeydown	key ကို ဖိထားခ်ိန္အတြက္
onkeyup	key ကို လႊတ္လိုက္ ခ်ိန္အတြက္
onsubmit	submit button ကို ႏိွပ္လိုက္တဲ့ အခ်ိန္အတြက္

Understanding Script Events and Handlers