Home » Vuejs » Vue.js Event Handling มาจัดการ Event กัน

ใครที่เปลี่ยนจาก pure javascript หรือ JQuery ก็คงจะงงกับการจัดการ Event เมื่อ user ทำการ click หรือทำ action ต่างๆกับ Web Application วันนี้เรามาดูกันดีกว่าว่า vue.js มี directive อะไรบ้างเพื่ออำนวยความสะดวกให้เรา..

สำหรับการเรียกใช้ event ใน vue.js ก็จะมี 2 แบบดังนี้

<button v-on:click="DoThis">Click Me</button> // ปกติ
<button @click="DoThis">Click Me</button> // shorthand

ทั้งสองตัวทำงานเหมือนกันแค่ย่อจาก v-on เหลือ @ เท่านั้นเองในที่นี้ผมขอใช้ @ ยกตัวอย่างเพื่อให้อ่านง่าย และ เขียนน้อยสไตล์ผม


ตัวจัดการ event มีให้เราเลือกใช้หลายตัวมากๆแต่ขอยกตัวอย่างที่ใช้บ่อยๆแทนนะครับ

@click ใช้กับ event การ click จากเมาส์เช่นเมื่อ user click ให้ทำอะไร
@change เมื่อมีการเปลี่ยนค่าจาก input เช่น radio button, select, input
@blur เมื่อ user เอาเมาส์ออกจาก element ไปคลิกที่อื่น หรือ เปลี่ยน tab browser หรือ การกระทำใดๆที่ไม่ได้ focus อยุ่ที่ element นั้น
@focus เมื่อ element นั้นถูก focus อยู่ หรือ เอาเมาส์จิ้มค้างไว้นั้นละ
@inputเมื่อ element นั้นถูก input ค่าจาก keyboard
@keyup เมื่อ user ปล่อย key ที่กด
@keydown 
เมื่อ user กด key
@keypress 
เมื่อ user กด key
@mouseup 
เมื่อ user ปล่อยเมาส์
@mousedown 
เมื่อ user คลิกเมาส์
@mousewheel 
เมื่อ user เลื่อนลูกล้อตรงเมาส์
@submit 
เมื่อ user กดส่ง form

ตาลายกันเลยทีเดียวนี่แค่เอาที่ผมใช้บ่อยๆนะครับที่จริงมียัน drag, drop แต่ผมยังไม่ได้ลอง

Event Modifiers

หลังจากรู้จัก event กันไปแล้วเรามาดูต่อดีกว่าว่าทำอะไรได้อีก.. หลายๆครั้งเวลาเราเรียกให้ event ทำงานเราก็จะใช้ event.preventDefault() หรือ event.stopPropagation() เพื่อให้ตัว event ไม่ไป refresh เพจ, หรือ ทำคำสั่งล่วงหน้าโดยที่เรายังไม่ได้เช็ค logic ซึ่งใน vue.js 2 นั้นเราไม่ต้องมาเขียนอะไรยาวๆแบบนี้เพราะผมเองก็ search ทุกครั้งเพราะจำไม่ได้ ฮ่าๆๆ มาดูกันต่อเลย..ที่ event modifiers

// เรียกใช้ ปกติ
<div @click="xxx" >Event Me!!<div>
// .stop ให้หยุดทำการ execute event
<div @click.stop="xxx" >Event Me!!<div>
// .prevent หยุดการ reload, refresh page
<div @click.prevent="xxx" >Event Me!!<div>
// เราสามารถนำ Event Modifiers ที่ vuejs สร้างมาเขียนต่อกันได้
<div @click.stop.prevent="xxx" >Event Me!!<div>
// ตอนส่ง form ก็อย่าลืม .prevent ละไม่งั้นที่พิมพ์มาหายหมดแน่!!
<form @submit.prevent="xxx"></form>
// .self คือต้องเกิด event ที่ตัวมันเท่านั้นถึงจะทำงาน event ถ้าเกิด click children จะไม่ทำงานนะครับ
<div @click.self="xxx" >Event Me!!<div>
// .once ทำ event นี้ครั้งเดียวใช้ได้ในเวอร์ชั่น 2.1.4+
<div @click.once="xxx" >Event Me!!<div>

.native

event ตัวนี้ผมมองข้ามมาหลายครั้งจนได้ใช้การทำงานของตัวนี้คือถ้าเรา import component มาแล้วเราใส่ event click บางครั้งมันจะไปเรียกตัว methods ข้างใน component เราสามารถสั่งให้มันทำงานใน parent หรือ root element ได้แบบนี้

// แบบนี้บางครั้งมันจะไปเรียก methods จากข้างใน component 
<my-component @click="doThis"></my-component>
// แบบนี้มันจะเรียกฟังก์ชั่นจาก parent มันเท่านั้น
<my-component @click.native="doThis"></my-component>

มีเคสนึงผมต้องการให้คลิก router-link เปลี่ยนหน้าแล้วปิด modal ที่เปิดอยู่ด้วยผมก็ลองใช้ @click ปกติไม่เกิดอะไรขึ้นผมเข้าใจว่ามันน่าจะไปทำงานในตัว router เลยผมเลยลองใส่แบบนี้

<router-link :to="{ name: 'profile' }" @click.native="closeModal"></router-link>

ปรากฏว่ามันจะไปเรียก methods ก่อนที่จะเปลี่ยนหน้าอันนี้งานดีมากเผืิ่อใครชอบทำอะไรแปลกๆฮ่าๆ..

Key Modifiers

เมื่อเราต้องการให้ event รับคำสั่งจาก keyboard หรือ short cut เพื่อ trigger ให้ตัว event ทำงาน

// เมื่อกดปุ่มที่มี keycode = 13(Enter Key) จะทำงาน
<input @keyup.13="submit">

ด้วยความที่ Vue.js ใจดีอยากให้ชีวิตเราง๊ายง่ายก็เลยทำ key แบบเข้าใจง่ายมาให้เราแบบนี้ และ มีหลายตัวให้เลือกใช้เช่นกัน

// .enter = keycode = 13 ง่ายขึ้นมานิดนึงไม่ต้องจำเลข
<input @keyup.enter=”submit”>
<input @keydown.space=”submit”>
<input @keypress.left=”do...”>
  • .enter
  • .tab
  • .delete (ปุ่ม “Delete” และ “Backspace” )
  • .esc
  • .space
  • .up ลูกศรขึ้น
  • .down ลูกศรลง
  • .left ลูกศรซ้าย
  • .right ลูกศรขวา

ยังไม่หมดแค่นี้ในเวอร์ชั่น 2.1.0 ได้เพิ่มความสบายให้เราอีกขั้น

  • .ctrl
  • .alt
  • .shift
  • .meta

อย่าลืมว่าเราสามารถเอา key พวกนี้มาต่อกันได้นะ เช่น

เมื่อกดปุ่ม Alt + C
<input @keyup.alt.67="clear">
เมื่อกดปุ่ม Ctrl + Click
<div @click.ctrl="doSomething">Do something</div>

และ เมื่อมันง่ายขนาดนี้แล้วเวอร์ชั่น 2.2.0+ ก็เพิ่มมาอีกสำหรับเมาส์เลย ใช้กับ event ของ Mouse Button Modifiers เช่น @mousedown.left=”doThis”

  • .left คลิกซ้าย
  • .right คลิกขวา
  • .middle คลิก scroll

access the original DOM with $event

บางครั้งเมื่อคลิกหรือทำ event อะไรซักอย่างเราอยากเข้าถึง dom นั้นๆก็สามารถส่งตัวแปร $event เข้าไปใน function ได้ซึ่ง Vue.js ทำไว้ให้แล้ว

<template>
 <div @click="doThis($event, 'Hello')">Click</div>
</template>
<script>
 methods: {
  doThis(event, text) {...}
 }
</script>

เกี่ยวกับผู้เขียน

Itthipat Thitsarak

สวัสดีครับผม อิทธิพัทธ์ (เป้) เป็น Freelance Web developer ชอบหาเทคนิคต่างๆที่ทำให้ชีวิต Programmer ง่ายขึ้นโดย Blog นี้จะ สอน Laravel, Vuejs, CSS, HTML 5 และอื่นๆ ที่เกี่ยวกับการทำเว็บไซต์

ขอบคุณทุกคนที่ติดตาม และอ่านบทความของผมครับ หากใครมีคำถามหรืออยากให้ผมเขียนเกี่ยวกับเรื่องอะไรเพิ่มเติม สามารถแสดงความคิดเห็นไว้ที่ใต้บทความ หรือส่งเรื่องเข้ามาที่ Email ได้เลยครับ หัวข้อไหนน่าสนใจ ผมจะหยิบมาเขียนบทความให้ได้อ่านกันเรื่อยๆครับ

Scroll to Top