ព្រឹត្តិការណ៍

មេរៀន​នេះ មាន​ជា​វីដេអូ ។

មេរៀន​ជា​វីដេអូ

ព្រឹត្តិការណ៍ គឺ​និយាយ​អំពីពេលវេលា ដែល​អ្នក​ប្រើប្រាស់​បញ្ចេញ​សកម្មភាព​អ្វី​ម្យ៉ាង​នៅ​លើ​ទំព័រ ។

អ្នក​ប្រើប្រាស់​រំកិល mouse ឬ​ចុច ឬ​វាយ​អ្វី​លើ keyboard ... ។

ព្រឹត្តិការណ៍​នៅ​ក្នុង HTML

Attribute នៃ HTML ដែល​ផ្ដើម​ដោយ on មាន​នាទី​កំណត់​ព្រឹត្តិការណ៍​ទៅ​ឲ្យ​ធាតុ ។ តម្លៃ​របស់​វា​ជា​កូដ Javascript ។

<p id="test">ស្វាគមន៍​មក​កាន់ KHODE</p>
<button onclick="changeText(test, 'សំណាងល្អ')">ប្ដូរ​អត្ថបទ</button>
function changeText(element, text) {
    element.innerHTML = text;
    // innerHTML ផ្ទុក​នូវ HTML ដែល​មាន​នៅ​ក្នុង​ធាតុ​មួយ
}

ព្រឹត្តិការណ៍​ដោយ​ប្រើ property នៃ Javascript

យើង​ក៏​អាច​កំណត់​ព្រឹត្តិការណ៍​ទៅ​ឲ្យ​ធាតុ​ណាមួយ ដោយ​មិន​ប្រើ attribute នៃ HTML បាន​ដែរ ។ ដោយ​យើង​កំណត់​ជា property ទៅ​ឲ្យ​ធាតុ​ណាមួយ​នោះ នៅ​ក្នុង Javascript ។

function triangleArea(width, height) {
    return width * height / 2;
}

calc.onclick = function () {
    // function នេះ យើង​អាច​កំណត់​ឈ្មោះ​ឲ្យ​វា​បាន តែ​ដោយ​សារ​តែ​យើង​មិន​ប្រើ​វា​ផ្សេង​ពី​កន្លែង​បច្ចុប្បន្ន ដូចនេះ​យើង​មិន​បាច់​កំណត់​ឈ្មោះ​វា​ក៏​បាន​ដែរ

    alert(triangleArea(width.valueAsNumber, height.valueAsNumber));
};
<p>គណនា​ផ្ទៃ​ក្រឡា​ត្រី​កោណ</p>
<input
       type="number"
       id="width"
       value="10"
       placeholder="ប្រវែង​ផ្ដេក">
<input
       type="number"
       id="height"
       value="20"
       placeholder="ប្រវែង​កម្ពស់">
<button id="calc">គណនា</button>

ឧទាហរណ៍​ខាងលើ យើង​បង្កើត function ថ្មី​មួយ​ជា​តម្លៃ​នៃ​ព្រឹត្តិការណ៍ onclick នៃ​ធាតុមួយ ។ យើង​ក៏​អាច​ហៅ function ដែល​បង្កើត​ដាច់​ដោយឡែក យក​មក​ប្រើ​បាន​ដែរ ។

function triangleArea(width, height) {
    return width * height / 2;
}

function calcBtn() {
    var output = triangleArea(width.valueAsNumber, height.valueAsNumber);
    alert(output);
}

window['test-calc'].onclick = calcBtn;
<p>គណនា​ផ្ទៃ​ក្រឡា​ត្រី​កោណ</p>
<input
       type="number"
       id="width"
       value="10"
       placeholder="ប្រវែង​ផ្ដេក">
<input
       type="number"
       id="height"
       value="20"
       placeholder="ប្រវែង​កម្ពស់">
<button id="test-calc">គណនា</button>

addEventListener()

function one() {
    alert('one');
}
function two() {
    alert('two');
}
btn.onclick = one;
btn.onclick = two;
<button id='btn'> ប៊ូតុង </button>

កូដ​ខាងលើ នៅ​ពេល​ចុច​លើ​ធាតុ​នៃ​អញ្ញាត btn វា​នឹង​ដំណើរការ​តែ function two ប៉ុណ្ណោះ ។ ដើម្បី​ឲ្យ​វា​ដំណើរការ​ទាំង one ទាំង two យើង​ត្រូវ​កំណត់​ដូចខាងក្រោម ។

function one() {
    alert('one');
}
function two() {
    alert('two');
}
btn.onclick = function () {
    one();
    two();
};
<button id='btn'> ប៊ូតុង </button>

ឬក៏​យើង​អាច​កំណត់​ដោយ​ប្រើ addEventListener() ។ តម្រូវ​ការ​នៃ addEventListener() ៖

  1. ឈ្មោះ​នៃ​ព្រឹត្តិការណ៍ ត្រូវ​សរសេរ​ជា string ហើយ​មិនមាន​ពាក្យ on ពី​មុខ​នោះ​ទេ
  2. function ដែល​ត្រូវ​ដំណើរការ ។
function one() {
    alert('one');
}
function two() {
    alert('two');
}
btn.addEventListener('click', one);
btn.addEventListener('click', two);
<button id='btn'>ប៊ូតុង</button>

ព័ត៌មាន​នៃ​ព្រឹត្តិការណ៍

ព័ត៌មាន​នៃ​ព្រឹត្តិការណ៍ ដូចជា

ព័ត៌មាន​ទាំងអស់​នោះ នឹង​ត្រូវ​ផ្ទុក​នៅ​ក្នុង​អញ្ញាត​ដែល​ជា​តម្រូវ​ការ​នៃ function ដែល​យើង​បាន​កំណត់​ចូល​ទៅ​ក្នុង​ព្រឹត្តិការណ៍​មួយ​នោះ ។

window.onmousemove = function (e) {
    // e នឹង​ផ្ទុក​ពត៌មាន​នៃ​ព្រឹត្តិការណ៍​បច្ចុប្បន្ន
    text.innerHTML = e.clientX;
    // clientX ផ្ទុក​ទីតាំង mouse តាម​អ័ក្ស x
}
<div id="text">រំកិល mouse លើ​ចម្លើយ</div>

យើង​នឹង​សិក្សា​អំពី​ព័ត៌មាន​នៃ​ព្រឹត្តិការណ៍ នៅ​លើឧទាហរណ៍​ក្រោយៗ ។

ទំព៏រ​ដើម កូដ វីដេអូ បញ្ជី ចែករំលែក បោះពុម្ភ ឡើង​លើ Facebook Google Plus Twitter មតិ ឧបត្ថម្ភ ទំនាក់ទំនង អាជ្ញាប័ណ្ឌ សិទ្ធ​អ្នក​និពន្ធ បិទ Khode Academy មុន បន្ទាប់ ប្ដូរ​ម៉ូត