ព្រឹត្តិការណ៍ (Events)

សេចក្តីផ្តើម

Events គឺជាសកម្មភាពដែលកើតឡើងនៅលើគេហទំព័រ HTML។ JavaScript អាចឆ្លើយតបទៅនឹង events ទាំងនេះ ធ្វើឱ្យគេហទំព័រមានអន្តរកម្ម (interactive)។ Events អាចកើតចេញពីអ្នកប្រើប្រាស់ (clicks, keypress) ឬពី browser (page load, resize)។

ឧទាហរណ៍ Events ក្នុងជីវិតប្រចាំថ្ងៃ 🎯

• 🖱️ Click: ចុចប៊ូតុង, ចុចតំណភ្ជាប់
• ⌨️ Keypress: វាយអត្ថបទក្នុង form
• 🖐️ Hover: ដាក់ mouse លើមឺនុយ
• 📜 Scroll: រំកិលទំព័រ
• 📱 Touch: ប៉ះអេក្រង់ទូរស័ព្ទ
• 📋 Submit: ផ្ញើទម្រង់

---

១. Event Types (ប្រភេទ Events)

Mouse Events 🖱️

Event	ពណ៌នា	ពេលកើតឡើង
click	ចុចមួយដង	ចុចហើយលែង mouse button
dblclick	ចុចពីរដង	ចុចពីរដងរហ័ស
mousedown	ចុចចុះ	ចុចប៉ុន្តែមិនទាន់លែង
mouseup	លែងចុច	លែង mouse button
mouseover	ចូលលើធាតុ	mouse pointer ចូលលើធាតុ
mouseout	ចេញពីធាតុ	mouse pointer ចេញពីធាតុ
mousemove	រំកិល mouse	mouse រំកិលលើធាតុ
contextmenu	Right-click	ចុចប៊ូតុងស្តាំ

Keyboard Events ⌨️

Event	ពណ៌នា	ពេលកើតឡើង
keydown	ចុចគ្រាប់ចុះ	ចុច key ចុះ
keyup	លែងគ្រាប់	លែង key
keypress	ចុចគ្រាប់	ចុចនិងលែង (deprecated)

Form Events 📝

Event	ពណ៌នា	ពេលកើតឡើង
submit	ផ្ញើទម្រង់	ចុចប៊ូតុង submit
change	ផ្លាស់ប្តូរតម្លៃ	តម្លៃផ្លាស់ប្តូរហើយ blur
input	បញ្ចូលតម្លៃ	វាយអត្ថបទ (realtime)
focus	ផ្តោតលើធាតុ	click ចូល input
blur	បាត់ផ្តោត	ចេញពី input

Window Events 🪟

Event	ពណ៌នា	ពេលកើតឡើង
load	ទំព័រ load រួច	ទំព័រនិង resources load រួច
resize	ផ្លាស់ប្តូរទំហំ	window size ផ្លាស់ប្តូរ
scroll	រំកិលទំព័រ	រំកិល scroll bar
unload	ចាកចេញ	បិទទំព័រ

---

២. កំណត់ Events តាម HTML Attributes

Inline Event Handlers

របៀបសាមញ្ញបំផុតគឺប្រើ event attributes ដោយផ្ទាល់នៅក្នុង HTML:

<button onclick="alert('Hello!')">Click Me</button>

<button onclick="myFunction()">Run Function</button>

<p onmouseover="this.style.color='red'">Hover me</p>

Common Event Attributes

• onclick - ចុចលើធាតុ
• ondblclick - ចុចពីរដង
• onmouseover - mouse ចូលលើធាតុ
• onmouseout - mouse ចេញពីធាតុ
• onchange - តម្លៃផ្លាស់ប្តូរ
• onsubmit - ផ្ញើទម្រង់
• onload - ទំព័រ load រួច
• onkeydown - ចុច key

គុណវិបត្តិ Inline Events ⚠️

• ❌ លាយ HTML និង JavaScript
• ❌ ពិបាក maintain
• ❌ មិនអាច attach events ច្រើន
• ❌ មិនល្អសម្រាប់ best practices

អនុសាសន៍: ជៀសវាង inline event handlers។ ប្រើ addEventListener() ជំនួស!

---

៣. កំណត់ Events តាម JavaScript Properties

Syntax

element.onclick = function() {
  // code here
};

// ឬប្រើ arrow function
element.onclick = () => {
  // code here
};

ឧទាហរណ៍

// ចាប់ធាតុ
const button = document.getElementById("myBtn");

// កំណត់ event
button.onclick = function() {
  alert("Button clicked!");
};

// ឬប្រើ named function
function handleClick() {
  console.log("Clicked!");
}

button.onclick = handleClick;

គុណសម្បត្តិ និង គុណវិបត្តិ

គុណសម្បត្តិ ✅

• ងាយស្រួលប្រើ
• ដាច់ JavaScript ពី HTML
• Browser support ល្អ

គុណវិបត្តិ ⚠️

• អាច attach event handler តែមួយប៉ុណ្ណោះ
• Handler ថ្មីជំនួស handler ចាស់

// Handler ថ្មីនឹងជំនួសចាស់
button.onclick = function() { console.log("First"); };
button.onclick = function() { console.log("Second"); }; // ជំនួស!

// ពេលចុច output: "Second" តែមួយ

---

៤. addEventListener() Method (ណែនាំ!) ⭐

Syntax

element.addEventListener(event, function, useCapture);

Parameters

• event (required): Event name ជា string គ្មាន "on" (e.g., "click", "mouseover")
• function (required): Function ដែលត្រូវ execute
• useCapture (optional): Boolean សម្រាប់ event phase (default: false)

ឧទាហរណ៍មូលដ្ឋាន

const button = document.getElementById("myBtn");

// Anonymous function
button.addEventListener("click", function() {
  alert("Hello!");
});

// Arrow function
button.addEventListener("click", () => {
  console.log("Clicked!");
});

// Named function
function handleClick() {
  alert("Button clicked!");
}
button.addEventListener("click", handleClick);

គុណសម្បត្តិ addEventListener() ✅

• 🎯 Multiple handlers: អាច attach handlers ច្រើនលើ event ដូចគ្នា
• 🔄 Remove handlers: អាច remove ដោយ removeEventListener()
• ⚙️ Event options: Support options ដូចជា once, passive, capture
• 📱 Modern: Best practice និង recommended
• 🌐 Consistent: Syntax ដូចគ្នាគ្រប់ browsers

Multiple Event Handlers

const button = document.getElementById("myBtn");

// អាច attach handlers ច្រើន
button.addEventListener("click", function() {
  console.log("Handler 1");
});

button.addEventListener("click", function() {
  console.log("Handler 2");
});

button.addEventListener("click", function() {
  console.log("Handler 3");
});

// Output ពេលចុច: Handler 1, Handler 2, Handler 3

Remove Event Listener

function handleClick() {
  console.log("Clicked!");
}

// Add event
button.addEventListener("click", handleClick);

// Remove event
button.removeEventListener("click", handleClick);

Event Options (Advanced)

// Execute one time only
button.addEventListener("click", handleClick, { once: true });

// Passive listener (better performance for scroll/touch)
window.addEventListener("scroll", handleScroll, { passive: true });

// Capture phase
parent.addEventListener("click", handleClick, { capture: true });

---

៥. Event Object

អ្វីជា Event Object?

ពេល event កើតឡើង browser បង្កើត event object មួយដែលផ្ទុកព័ត៌មានលម្អិតអំពី event នោះ។ Object នេះត្រូវបានផ្តល់ជា parameter ទៅ event handler function។

Common Properties

Property	ពណ៌នា
type	ប្រភេទ event (e.g., "click", "keydown")
target	ធាតុដែល trigger event
currentTarget	ធាតុដែលមាន event listener
timeStamp	ពេលវេលា event កើត
clientX, clientY	ទីតាំង mouse (viewport coordinates)
pageX, pageY	ទីតាំង mouse (page coordinates)
key	Key ដែលត្រូវបានចុច (keyboard events)
keyCode	Key code (deprecated, ប្រើ key ជំនួស)

Common Methods

Method	ពណ៌នា
preventDefault()	បញ្ឈប់ default behavior
stopPropagation()	បញ្ឈប់ event bubbling
stopImmediatePropagation()	បញ្ឈប់ handlers ផ្សេងទៀត

ឧទាហរណ៍

// Mouse event
element.addEventListener("click", function(event) {
  console.log("Event type:", event.type);
  console.log("Target:", event.target);
  console.log("Mouse X:", event.clientX);
  console.log("Mouse Y:", event.clientY);
});

// Keyboard event
input.addEventListener("keydown", function(event) {
  console.log("Key pressed:", event.key);
  console.log("Key code:", event.keyCode);
  
  // បញ្ឈប់ Enter key
  if (event.key === "Enter") {
    event.preventDefault();
  }
});

// Prevent form submit
form.addEventListener("submit", function(event) {
  event.preventDefault();
  console.log("Form not submitted!");
});

---

៦. Event Bubbling និង Capturing

Event Propagation (ការរីករាលដាល)

ពេល event កើតឡើងលើធាតុមួយ វារត់តាម 3 phases:

1. Capturing Phase: Event ចុះពី window ទៅកាន់ target element
2. Target Phase: Event ទៅដល់ target element
3. Bubbling Phase: Event ឡើងពី target ទៅកាន់ window

Bubbling (Default)

Event "ពុះ" ឡើងពី child ទៅ parent elements:

<div id="parent">
  <button id="child">Click Me</button>
</div>

<script>
document.getElementById("parent").addEventListener("click", () => {
  console.log("Parent clicked");
});

document.getElementById("child").addEventListener("click", () => {
  console.log("Child clicked");
});

// ពេលចុចប៊ូតុង Output:
// Child clicked
// Parent clicked (bubbling!)
</script>

Stop Bubbling

child.addEventListener("click", function(event) {
  event.stopPropagation(); // បញ្ឈប់ bubbling
  console.log("Child only");
});

Event Capturing

// ប្រើ capture: true
parent.addEventListener("click", () => {
  console.log("Parent (capturing)");
}, true);

child.addEventListener("click", () => {
  console.log("Child");
});

// Output: Parent (capturing), Child

---

៧. Best Practices 💡

✅ DO (ត្រូវធ្វើ)

• ប្រើ addEventListener() ជំនួស inline handlers
• ប្រើ event delegation សម្រាប់ lists ធំៗ
• Remove event listeners ពេលមិនត្រូវការ (memory leaks)
• ប្រើ preventDefault() ពេលចាំបាច់
• ប្រើ named functions សម្រាប់ handlers ដែលអាច reuse
• Check browser compatibility សម្រាប់ events ថ្មី

❌ DON'T (មិនត្រូវធ្វើ)

• កុំប្រើ inline event handlers (onclick="...")
• កុំភ្លេច check event.target
• កុំប្រើ stopPropagation() ដោយគ្មានហេតុផល
• កុំ attach listeners ច្រើនពេកដោយមិនចាំបាច់
• កុំភ្លេច remove listeners ពេលលុបធាតុ

Event Delegation Pattern

ជំនួស attach listeners លើធាតុជាច្រើន attach លើ parent តែមួយ:

// ❌ មិនល្អ - attach ច្រើន
document.querySelectorAll(".item").forEach(item => {
  item.addEventListener("click", handleClick);
});

// ✅ ល្អ - event delegation
document.getElementById("list").addEventListener("click", function(event) {
  if (event.target.classList.contains("item")) {
    handleClick(event);
  }
});

---

សេចក្តីសង្ខេប

មេរៀនបន្ទាប់: DOM Manipulation - យើងនឹងសិក្សាពីរបៀបកែប្រែ HTML elements ដោយប្រើ JavaScript!