# v-on 修飾符 (2-6)
###### tags: `Vue`、`2. 指令語法全介紹`
2022.3.2

**本章所有內容只會調用此方法**

<script>
    methods:{
        trigger(name){
            console.log(`${name},此事件被觸發`)
        }
    }
</script>

### 1. 按鍵修飾符 (@keyup:只要按鍵盤就會觸發)
* #### 別名修飾符 : 當按鍵ENTER時才會觸發。

<input type="text" @keyup.enter = "trigger('Enter')">

* #### 相依別名修飾符 : 當按鍵ENTER+ALT才會被觸發。

<input type="text" @keyup.enter.alt = "trigger('Enter+Alt')">

<script>
    methods:{
        trigger(name){
            console.log(`${name},此事件被觸發`)
        }
    }
</script>

* #### 特定別名修飾符 : 當按鍵案'H'時才會被觸發(大小寫不分)。

<input type="text" @keyup.H = "trigger('H')">

<script>
    methods:{
        trigger(name){
            console.log(`${name},此事件被觸發`)
        }
    }
</script>

### 2. 滑鼠修飾符(@click)
* #### .left : 當滑鼠點擊左鍵觸發

<button type="button" @click.left="trigger('滑鼠左鍵')">按鈕</button>

* #### .right : 當滑鼠點擊右鍵觸發

<button type="button" @click.right="trigger('滑鼠右鍵')">按鈕</button>

* #### .middle : 當滑鼠點擊中鍵觸發

<button type="button" @click.middle="trigger('滑鼠中鍵')">按鈕</button>

### 3. 事件修飾符
* #### **.prevent** : 調用even.preventDefault()，取消HTML預設事件。

<!-- 可以避免重新整理 -->
<form @submit.prevent="trigger('取消HTML預設事件')">
    <button>送出表單</button>
</form>

* #### **.once** : 只觸發一次，除非從新整理。

<button type="button" @click.once = "trigger('只觸發一次')">按鈕</button>

* #### **.stop** : 調用event.stopPropagation()，由內向外查找，當事包裹型HTML時，事件觸發會重「內向外」一次觸發所有事件，因此用.stop可以阻止事件冒泡。

<div style="width: 200px; height: 200px; background-color: red;" @click.stop="trigger('外')">
    <div style="width: 150px; height: 150px; background-color: green;" @click.stop ="trigger('中')">
        <div style="width: 100px; height: 100px; background-color: blue;" @click.stop="trigger('內')"></div>
    </div>
</div>

* #### **.capture** : 添加事件偵聽器使用capture模式，原本包裹型是由「內向外」全部觸發，加上capture則會轉換成成「外而內」。

<div style="width: 200px; height: 200px; background-color: red;" @click.capture="trigger('外')">
    <div style="width: 150px; height: 150px; background-color: green;" @click.capture ="trigger('中')">
        <div style="width: 100px; height: 100px; background-color: blue;" @click.capture="trigger('內')"></div>
    </div>
</div>

* #### **.self** : 只當偵聽器綁定的元素本身觸發時才觸發回調，只會觸發點擊物件的事件。

<div style="width: 200px; height: 200px; background-color: red;" @click.self="trigger('外')">
    <div style="width: 150px; height: 150px; background-color: green;" @click.self ="trigger('中')">
        <div style="width: 100px; height: 100px; background-color: blue;" @click.self="trigger('內')"></div>
    </div>
</div>