data-on

ภาพรวม

data-on ผูก event handlers กับ elements รองรับ event modifiers สำหรับรูปแบบทั่วไปเช่น การป้องกัน default behavior, key filtering และอื่นๆ

ใช้เมื่อ:

• จัดการ interactions จากผู้ใช้ (clicks, inputs ฯลฯ)
• ตอบสนอง keyboard events
• จัดการ form submissions

ทำไมต้องใช้:

• ✅ Event binding แบบ declarative
• ✅ มี 20+ built-in modifiers
• ✅ Cleanup อัตโนมัติเมื่อ element ถูกลบ
• ✅ รองรับ method arguments

การใช้งานพื้นฐาน

Click Handler

<button data-on="click:handleClick">คลิกที่นี่</button>

ใน JavaScript:

function handleClick(event) {
  console.log('ปุ่มถูกคลิก!');
}

กับ Arguments

<button data-on="click:deleteItem(item.id)">ลบ</button>

function deleteItem(id, event) {
  console.log('ลบรายการ:', id);
}

Syntax

<element data-on="eventType.modifier1.modifier2:methodName(args)">

Event Types

รองรับ DOM events มาตรฐานทั้งหมด:

Modifiers Reference

Event Behavior Modifiers

Key Modifiers

Mouse Button Modifiers

System Key Modifiers

ฟีเจอร์

1. Basic Event Handling

<button data-on="click:save">บันทึก</button>
<input data-on="input:handleInput">
<form data-on="submit:handleSubmit">

2. Prevent Default

<!-- ป้องกัน form submission -->
<form data-on="submit.prevent:handleSubmit">
  <button type="submit">ส่ง</button>
</form>

<!-- ป้องกัน link navigation -->
<a href="#" data-on="click.prevent:openModal">เปิด Modal</a>

3. Stop Propagation

<div data-on="click:closeModal">
  <div class="modal" data-on="click.stop:noop">
    <!-- คลิกที่นี่จะไม่ปิด modal -->
  </div>
</div>

4. Key Modifiers

<!-- Trigger เมื่อกด Enter -->
<input data-on="keydown.enter:search">

<!-- Trigger เมื่อกด Escape -->
<div data-on="keydown.esc:closeModal">

<!-- Trigger เมื่อกด Tab -->
<input data-on="keydown.tab:moveToNext">

5. Modifier Combinations

<!-- Ctrl+Enter เพื่อส่ง -->
<textarea data-on="keydown.ctrl.enter:submit"></textarea>

<!-- Shift+Click -->
<div data-on="click.shift:selectRange"></div>

<!-- Ctrl+S เพื่อบันทึก -->
<div data-on="keydown.ctrl.s.prevent:save"></div>

6. Multiple Event Bindings

<input
  data-on="focus:onFocus, blur:onBlur, input:onInput">

7. Method Arguments

<!-- ส่ง data properties -->
<button data-on="click:deleteUser(user.id)">ลบ</button>

<!-- ส่งค่า literal -->
<button data-on="click:setStatus('active')">เปิดใช้งาน</button>

<!-- ส่งหลาย arguments -->
<button data-on="click:updateItem(item.id, 'published')">เผยแพร่</button>

<!-- ส่ง index ในลูป -->
<div data-for="item in items">
  <template>
    <button data-on="click:selectItem(index)">เลือก</button>
  </template>
</div>

ตัวอย่างขั้นสูง

ฟอร์มกับ Validation

<form data-on="submit.prevent:handleSubmit">
  <input
    type="email"
    name="email"
    data-on="input:validateEmail, blur:validateEmail">

  <input
    type="password"
    name="password"
    data-on="keydown.enter:handleSubmit, input:validatePassword">

  <button type="submit">เข้าสู่ระบบ</button>
</form>

Keyboard Shortcuts

<div class="editor"
     data-on="
       keydown.ctrl.s.prevent:save,
       keydown.ctrl.z.prevent:undo,
       keydown.ctrl.shift.z.prevent:redo,
       keydown.esc:closeEditor
     ">
  <textarea data-model="content"></textarea>
</div>

Drag and Drop

<div class="dropzone"
     data-on="
       dragenter.prevent:onDragEnter,
       dragover.prevent:onDragOver,
       dragleave:onDragLeave,
       drop.prevent:onDrop
     ">
  <p>วางไฟล์ที่นี่</p>
</div>

<div class="draggable"
     draggable="true"
     data-on="dragstart:onDragStart">
  ลากฉัน
</div>

Context Menu

<div class="item"
     data-on="contextmenu.prevent:showContextMenu">
  คลิกขวาเพื่อดูตัวเลือก
</div>

Infinite Scroll

<div class="scroll-container"
     data-on="scroll:handleScroll">
  <div data-for="item in items">
    <template>
      <div class="item" data-text="item.name"></div>
    </template>
  </div>
  <div data-if="isLoading" class="loader">กำลังโหลด...</div>
</div>

function handleScroll(event) {
  const container = event.target;
  if (container.scrollTop + container.clientHeight >= container.scrollHeight - 100) {
    loadMoreItems();
  }
}

API อ้างอิง

Handler Signature

function handlerName(arg1, arg2, ..., event) {
  // Arguments ที่ส่งใน data-on มาก่อน
  // Event object เป็น parameter สุดท้ายเสมอ
}

Event Object

Native DOM Event object จะถูกส่งเป็น argument สุดท้าย:

ข้อควรระวัง

⚠️ 1. ไม่พบ Function

<!-- ❌ Function ต้อง global หรืออยู่ใน component methods -->
<button data-on="click:localFunction">คลิก</button>

<!-- ✅ ทำให้เป็น global -->
<script>
  window.myHandler = function(e) { ... };
</script>
<button data-on="click:myHandler">คลิก</button>

⚠️ 2. ขาด Prevent บน Forms

<!-- ❌ Form จะ submit และ reload หน้า -->
<form data-on="submit:handleSubmit">

<!-- ✅ ป้องกัน default submission -->
<form data-on="submit.prevent:handleSubmit">

⚠️ 3. ปัญหา Event Bubbling

<!-- ❌ Inner click trigger outer handler ด้วย -->
<div data-on="click:closeDropdown">
  <button data-on="click:toggleDropdown">สลับ</button>
</div>

<!-- ✅ Stop propagation บน inner element -->
<div data-on="click:closeDropdown">
  <button data-on="click.stop:toggleDropdown">สลับ</button>
</div>

⚠️ 4. Button Default Type

Buttons ภายใน forms จะ default เป็น type="submit":

<!-- ❌ นี่จะ submit form -->
<form>
  <button data-on="click:doSomething">คลิก</button>
</form>

<!-- ✅ กำหนด type ชัดเจน -->
<form>
  <button type="button" data-on="click:doSomething">คลิก</button>
</form>

หมายเหตุ: data-on เพิ่ม .stop modifier อัตโนมัติสำหรับ clicks บน buttons เพื่อป้องกันปัญหานี้

Modifier Combinations Quick Reference

Directives ที่เกี่ยวข้อง

• data-model - สำหรับ form input binding
• data-if - สำหรับ conditional rendering
• data-for - สำหรับ event handlers ในลูป