今天要來介紹如何處理基本的事件監聽，並且搭配各種修飾符來控制事件的行為，例如阻止事件冒泡、取消預設行為、限制觸發條件等，讓事件處理變得更加靈活且強大。

事件處理 v-on

用於監聽DOM事件，並且在觸發事件時執行一些 JavaScript 程式碼，由於此語法使用很頻繁，因此常以@作為簡寫。

基本語法：
v-on:事件名稱="運算式"
範例語法：

<button v-on:click="doSomething">Click </button> 等同於
<button @click="doSomething">Click </button>

接下來要介紹三種事件處理的修飾符～

1. 事件修飾符

透過設定事件的屬性，可以增加指令的功能，也有助於減少程式碼的撰寫。

.stop

會呼叫event.stopPropagation() ，阻止事件向父層元素冒泡(由內向外)，讓事件只在當前元素處理，不會觸發外層元素的同類型事件處理器。

<div @click="outerClick">
  <button @click.stop="innerClick">停止冒泡</button>
</div>

.prevent

會呼叫 event.preventDefault() ，可以停止瀏覽器的預設行為，例如： 原本點擊超連結會跳轉到指定網址，加上 .prevent 修飾符後會阻止這個跳轉行為。

<a href="https://www.google.com" @click.prevent="handlePreventClick">阻止跳轉的連結</a>

.capture

在預設情況下，事件處理器在冒泡階段(由內向外)執行，加上.capture 修飾符會讓事件處理器在捕獲階段(由外向內)執行。

<div @click.capture="captureClick">
  <button @click="normalClick">捕獲階段執行</button>
</div>

.self

表示只會觸發自己範圍內的事件，並且不會觸發由子層傳來的事件。

<div @click.self="doThat">...</div>

.once

表示事件只會被觸發一次。

<button @click.once="submitForm">只能點擊一次</button>

.passive

會無視 event.preventDefault() 的功能，所以只要加上.passive修飾符表示不會阻止瀏覽器的預設行為，因此 .passive 和 .prevent 不能一起使用，因為 .prevent 會被視為無效。
以下舉例是滾動事件的默認行為 (scrolling) 將立即發生而非等待 onScroll 完成

<div @scroll.passive="onScroll">...</div>

2. 按鍵修飾符

用來監聽鍵盤按鍵點擊的事件。

.enter

捕獲enter鍵

<input @keyup.enter="submitForm" placeholder="按Enter提交">

.delete

捕獲delete 或是 backspace鍵

.tab

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

在Windows 鍵盤上 meta 鍵是Windows鍵(⊞)，在Mac 鍵盤上，meta 是Command鍵(⌘)

3. 滑鼠修飾符

用來監聽滑鼠按鍵點擊的事件。

.right

滑鼠右鍵

<div @click.right="showContextMenu">右鍵選單</div>

.left

滑鼠左鍵

.middle

滑鼠中間滾輪

最後補充

不同的修飾符可以一起搭配使用，並且修飾符使用的順序會影響功能。

參考資源

https://vuejs.org/guide
https://hackmd.io/@taiwansmile/Hy5X6Eit8
https://www.runoob.com/vue3/vue3-syntax.html
https://medium.com/pierceshih/vue-js-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98-day5-v-on-%E4%BA%8B%E4%BB%B6%E7%9B%A3%E8%81%BD-c9be648e9db0
https://zh-hk.vuejs.org/guide/essentials/event-handling
https://book.vue.tw/CH1/1-5-events.html