ใครที่เปลี่ยนจาก 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>

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

Scroll to Top