Events នៅក្នុង JavaScript
HTML Event គឺជាអ្វីដែលត្រូវកើតឡើងចំពោះ HTML Element។ នៅពេលដែល JavaScript ត្រូវបានប្រើក្នុង HTML Page វាអាចមានទំនាក់ទំនងជាមួយ Event ទាំងអស់នេះ ។
HTML Event អាច Browser ជាអ្នកធ្វើ ឬ User ជាអ្នកធ្វើ។ HTML Event មានដូចជា៖ កើតឡើងពេល Page បានដំណើរការចប់ Input Field ត្រូវបានផ្លាស់ប្តូរ និង Button ត្រូវបានចុច ។
ជាទូទៅនៅពេលដែល Event ទាំងនោះកើតឡើងយើងអាចកំណត់វាឱ្យធ្វើអ្វីមួយ។ JavaScript អាចកំណត់ឱ្យអ្នកអាចដំណើរការកូដនៅពេលបានជួប Event ណាមួយ ។
HTML Event អ្នកអាចសរសេរដោយប្រើសញ្ញា Single Quote ឬ Double Quote ក៏បាន ។
---------------------------------------------------------------------------------------
<tag event='some JavaScript'>...</tag>
<tag event="some JavaScript">...</tag>
---------------------------------------------------------------------------------------
Events ទូទៅប្រើប្រាស់ក្នុង HTML មានដូចខាងក្រោម៖
- onchange កើតឡើងពេល HTML Element ត្រូវបានផ្លាស់ប្តូរ
- onclick កើតឡើងពេលអ្នកប្រើប្រាស់ចុចលើ HTML Element ណាមួយ
- onmouseover កើតឡើងពេលអ្នកប្រើប្រាស់យក Mouse ដាក់លើ HTML Element ណាមួយ
- onmouseout កើតឡើងពេលអ្នកប្រើប្រាស់ដក Mouse ចេញពី HTML Element ណាមួយ
- onkeydown កើតឡើងពេលអ្នកប្រើប្រាស់កំពុងសង្កត់ចុចលើ Key ណាមួយរបស់ Keyboard
- onkeyup កើតឡើងពេលអ្នកប្រើប្រាស់ព្រលែង Key ចេញវិញ
- onload កើតឡើងពេល Browser បានដំណើរការ Page ចប់
ការប្រើ Event onchange
ជាទូទៅគេច្រើនប្រើ Event នេះជាមួយនឹង <select> របស់ Form នៅពេលដែលជ្រើសរើសតម្លៃណាមួយវានឹងមានសកម្មភាព ឬដំណើរការអ្វីមួយកើតឡើង ។
---------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>onchange</title>
</head>
<body>
<select id="mySelect" onchange="study()">
<option valule="HTML">HTML</option>
<option valule="CSS">CSS</option>
<option valule="JavaScript">JS</option>
</select>
<div id="result"></div>
<script>
function study(){
var frmValue = document.getElementById("mySelect").value;
document.getElementById("result").innerHTML = frmValue;
}
</script>
</body>
</html>
---------------------------------------------------------------------------------------
ការប្រើ Event onclick
ភាគច្រើនគេប្រើ Event នេះជាមួយប៊ូតុង ហើយក្រៅពីនេះគេក៏អាចប្រើវាបាននៅលើ Element ផ្សេងៗទៀតបានផងដែរ ។
---------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>onclick</title>
</head>
<body>
<button onclick="study()">You Study</button>
<div id="result"></div>
<script>
function study(){
document.getElementById("result").innerHTML = "You study JavaScript";
}
</script>
</body>
</html>
---------------------------------------------------------------------------------------
ការប្រើ Event onmouseover
គេអាចប្រើ Event នេះគ្រប់ Element ទាំងអស់។
---------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>onmouseover</title>
</head>
<body>
<div onmouseover="study()">Over me</div>
<script>
function study(){
alert ("You study JavaScript");
}
</script>
</body>
</html>
---------------------------------------------------------------------------------------
ការប្រើ Event onmouseout
គេអាចប្រើ Event នេះគ្រប់ Element ទាំងអស់។
---------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>onmouseout</title>
</head>
<body>
<img id="pic" src="js.png" onmouseover="zoomin()" onmouseout="zoomout()">
<script>
function zoomin(){
document.getElementById("pic").style.width = "700px";
}
function zoomout(){
document.getElementById("pic").style.width = "300px";
}
</script>
</body>
</html>
---------------------------------------------------------------------------------------
ការប្រើ Event onkeydown
ភាគច្រើនគេប្រើ Event នេះលើ input របស់ Form មានដូចជា Textbox ឬ Password ជាដើម ។
---------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>onkeydown</title>
</head>
<body>
<input type="text" onkeydown="typing()">
<script>
function typing(){
alert("You typed text in textbox");
}
</script>
</body>
</html>
---------------------------------------------------------------------------------------
ការប្រើ Event onkeyup
ភាគច្រើនគេប្រើ Event នេះលើ input របស់ Form មានដូចជា Textbox ឬ Password ជាដើម ។
---------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>onkeyup</title>
</head>
<body>
<input type="text" id="txt" onkeyup="upper()">
<script>
function upper(){
var t = document.getElementById("txt");
t.value = t.value.toUpperCase();
}
</script>
</body>
</html>
---------------------------------------------------------------------------------------
ការប្រើ Event onload
ភាគច្រើនគេប្រើ Event នេះជាមួយ document ឬ body របស់ Web Page ។
---------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<title>onload</title>
</head>
<body onload="msg()">
<input type="text" id="txt" onkeyup="upper()">
<script>
function msg(){
alert("Page is loaded successfully!");
}
</script>
</body>
</html>
---------------------------------------------------------------------------------------
Comments
Post a Comment