យើងដឹងរួចមកហើយថា ហេតុការណ៍ (event) គឺជារឿងរ៉ាវទាំងឡាយណាដែលកើតមានឡើងនៅពេលដែលកម្មវិធីកំពុងដំណើរការ។ ជាក់ស្តែង ការចុចនេះឬចុចនោះរបស់អ្នកប្រើប្រាស់ ជាបញ្ច័យបណ្តាលអោយហេតុការណ៍ឈ្មោះ click កើតមានឡើង។
មួយវិញទៀត កម្មវិធីខ្លួនវាផ្ទាល់ក៏អាចបង្កើតហេតុការណ៍ផ្សេងៗបានដែរ មានដូចជានៅពេលដែល browser ត្រូវបានបើក និងអ្វីៗនៅក្នុងនោះត្រូវបានរៀបចំរួចរាល់ស្រេចបាច់ browser បង្កើតហេតុការណ៍មួយមានឈ្មោះថា onload ។
យ៉ាងណាម៉ិញ បណ្តាហេតុកាណ៍ទាំងនោះ អាចត្រូវយកទៅភ្ជាប់ទៅនឹងក្បួនវិធីផ្សេងៗ ដែលជាប្រការធ្វើអោយក្បួនវិធីទាំងនោះ នឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិ នៅពេលហេតុការណ៍ទាំងនោះកើតមានឡើង។ ហើយក្បួនវិធីភ្ជាប់ទៅនឹងហេតុការណ៍ទាំងនោះ ត្រូវគេអោយឈ្មោះថាជា event handler ដែលយើងអាចបកប្រែមកជាភាសាខ្មែរថា ក្បួនវិធីឆ្លើយតបហេតុការណ៍។
ទន្ទឹមគ្នានេះដែរ កញ្ចប់ jQuery ក៏ផ្តល់លទ្ធភាពអោយយើងអាចភ្ជាប់ក្បួនវិធីទាំងឡាយទៅនឹងស្ទើរគ្រប់ហេតុការណ៍ទាំងអស់ដែលអាចកើតមានឡើង នៅក្នុងកម្មវិធីជាភាសា JS ។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖
ចាប់ពីបន្ទាត់លេខ 14 ដល់ 16 នៅក្នុងកម្មវិធីខាងលើនេះ គឺជាការប្រើប្រាស់ក្បួនវិធីនៅក្នុងកញ្ចប់ jQuery ដើម្បីភ្ជាប់ហេតុការណ៍ click ទៅនឹងគ្រប់ធាតុ p ទាំងអស់ ដែលមាននៅក្នុងទំព័រ HTML ។ មួយវិញទៀត យើងសង្កេតឃើញថា ក្បួនឆ្លើយតបហេតុការណ៍នៅក្នុងកញ្ចប់ jQuery គឺជាក្បួនអត់ឈ្មោះ ដែលនឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិ នៅពេលហេតុការណ៍កើតមានឡើង។
លើសពីនេះទៀត នៅក្នុងកញ្ចប់ jQuery ក្នុងករណីយើងចង់ភ្ជាប់ហេតុការណ៍លើសពីមួយ ទៅនឹងបណ្តាធាតុ HTML ទាំងឡាយ យើងចាំបាច់ត្រូវយកវិធីឈ្មោះ on() មកប្រើ ដោយធ្វើដូចខាងក្រោមនេះ៖
មួយវិញទៀត កម្មវិធីខ្លួនវាផ្ទាល់ក៏អាចបង្កើតហេតុការណ៍ផ្សេងៗបានដែរ មានដូចជានៅពេលដែល browser ត្រូវបានបើក និងអ្វីៗនៅក្នុងនោះត្រូវបានរៀបចំរួចរាល់ស្រេចបាច់ browser បង្កើតហេតុការណ៍មួយមានឈ្មោះថា onload ។
យ៉ាងណាម៉ិញ បណ្តាហេតុកាណ៍ទាំងនោះ អាចត្រូវយកទៅភ្ជាប់ទៅនឹងក្បួនវិធីផ្សេងៗ ដែលជាប្រការធ្វើអោយក្បួនវិធីទាំងនោះ នឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិ នៅពេលហេតុការណ៍ទាំងនោះកើតមានឡើង។ ហើយក្បួនវិធីភ្ជាប់ទៅនឹងហេតុការណ៍ទាំងនោះ ត្រូវគេអោយឈ្មោះថាជា event handler ដែលយើងអាចបកប្រែមកជាភាសាខ្មែរថា ក្បួនវិធីឆ្លើយតបហេតុការណ៍។
ទន្ទឹមគ្នានេះដែរ កញ្ចប់ jQuery ក៏ផ្តល់លទ្ធភាពអោយយើងអាចភ្ជាប់ក្បួនវិធីទាំងឡាយទៅនឹងស្ទើរគ្រប់ហេតុការណ៍ទាំងអស់ដែលអាចកើតមានឡើង នៅក្នុងកម្មវិធីជាភាសា JS ។ ពិនិត្យកម្មវិធីខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
</head>
<body style="font:14px/1.5 'Odor Mean Chey'">
ចុចបើមិនចង់ឃើញរូបខ្ញុំ!
ចុចបំបាត់រូបខ្ញុំទៅ!
ចុចបំបាំងរូបខ្ញុំ!
<script>
$("p").click(function(){
$(this).hide();
});
</script>
</body>
</html>
ចុចបើមិនចង់ឃើញរូបខ្ញុំ!
ចុចបំបាត់រូបខ្ញុំទៅ!
ចុចបំបាំងរូបខ្ញុំ!
ចាប់ពីបន្ទាត់លេខ 14 ដល់ 16 នៅក្នុងកម្មវិធីខាងលើនេះ គឺជាការប្រើប្រាស់ក្បួនវិធីនៅក្នុងកញ្ចប់ jQuery ដើម្បីភ្ជាប់ហេតុការណ៍ click ទៅនឹងគ្រប់ធាតុ p ទាំងអស់ ដែលមាននៅក្នុងទំព័រ HTML ។ មួយវិញទៀត យើងសង្កេតឃើញថា ក្បួនឆ្លើយតបហេតុការណ៍នៅក្នុងកញ្ចប់ jQuery គឺជាក្បួនអត់ឈ្មោះ ដែលនឹងត្រូវយកទៅប្រើជាស្វ័យប្រវត្តិ នៅពេលហេតុការណ៍កើតមានឡើង។
លើសពីនេះទៀត នៅក្នុងកញ្ចប់ jQuery ក្នុងករណីយើងចង់ភ្ជាប់ហេតុការណ៍លើសពីមួយ ទៅនឹងបណ្តាធាតុ HTML ទាំងឡាយ យើងចាំបាច់ត្រូវយកវិធីឈ្មោះ on() មកប្រើ ដោយធ្វើដូចខាងក្រោមនេះ៖
<!DOCTYPE html>
<html>
<head>
</head>
<body style="font:14px/1.5 'Odor Mean Chey'">
ចុចឬអូស mouse នៅលើឃ្លានេះ.
<script>
$("p").on({
mouseenter: function(){
$(this).css("background-color", "gray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
</script>
</body>
</html>
ចុចឬអូស mouse នៅលើឃ្លានេះ.
