---
# System prepended metadata

title: '[學習筆記] Vue 事件處理'

---

# [學習筆記] Vue 事件處理

## :eight_spoked_asterisk: 監聽事件
:::success
用`v-on`或是`@`來監聽DOM事件，並在事件觸發時執行對應的JavaScript。

用法： `v-on:click="handler"` 或 `@click="handler"`

事件處理器(handler)的值可以是：
1. 內嵌事件處理器：事件被觸發時執行的內嵌JavaScript語句(與`onclick`類似)
1. 方法事件處理器：一個指向元件上定義方法的屬性名稱或路徑
:::


### 1. 內嵌事件處理器
```javascript=
const count = ref(0)
```
```htmlembedded=
//簡單來說就是按了按鈕會一直+1

<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>
```

### 2. 方法事件處理器
要更靈活的話，可以用方法事件處理器。
```javascript!
const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  // `event` 是 DOM 原生事件
  if (event) {
    alert(event.target.tagName)
  }
}
```
```htmlembedded=
// 按下會先跳出字，再來會跳出我們點選的event tagName
<button @click="greet">Greet</button>
```

### 在內嵌事件處理器中存取事件參數
```javascript!
<!-- 使用特殊的 $event 变量 -->
function warn(message, event) {
  // 这里可以访问原生事件
  if (event) {
    event.preventDefault()
  }
  alert(message)
}
```
```htmlembedded=
<!-- 使用特殊的$event變數：Vue.js為內聯事件處理程序提供了特殊的$event變量，它代表了觸發事件時的觸發事件物件。您可以像這樣使用它： -->
// 在這個範例中，$event包含了原生事件對象，可以在warn方法中存取。
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用內聯箭頭函數：您也可以使用內聯箭頭函數來傳遞事件物件： -->
// 這裡，箭頭函數接受event參數，等待其提交給warn方法。
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>
```
在這兩種情況下，warn方法接收到事件對像作為參數，您可以在其中存取事件對象，然後根據需要執行操作，例如預設阻止行為（event.preventDefault()）。
這是一種常見的方式，特別是在處理表單時提交等需要存取事件物件的情況下，便於執行驗證並決定是否阻止預設行為。

### 事件修飾符

**event.preventDefault()：**

* 作用：event.preventDefault() 用於取消事件的預設行為。
    * 許多具有預設行為的HTML元素，例如<a>元素的點擊會導航到連結的URL，表單的提交會刷新頁面等。
    * 呼叫event.preventDefault() 可以阻止這些預設行為的發生。
* 常見例子：
    * 阻止表單的預設提交，以便使用AJAX來處理表單資料。
    * 阻止連結的預設行為導航，以便使用Vue Router或其他路由庫來處理頁面導航。
    * 阻止右鍵選單的預設顯示，以便上下文選單。
    

    
**event.stopPropagation()：**

* 作用：event.stopPropagation() 對於阻止事件的進一步傳播，阻止其冒泡到父元素或其他祖先元素。
    * 這對於阻止事件在底層底層元素中傳播並觸發多個事件處理程序非常有用。
* 常見例子：
    * 在一個包含多個元素的元件中，確保event.stopPropagation()可以只觸發與使用者操作最相關的事件處理程序，而不會觸發其他不必要的處理程序。
    * 阻止父元素的點擊事件被子元素的點擊事件觸發，此時您只希望處理子元素的點擊時使用。
    * 在自訂下拉式選單或模態框等元件中，請確保點擊元件外部區域時關閉元件而不觸發其他不相關的事件。