事件處理(1)

監聽事件

我們可以使用 v-on 指令 (簡寫為 @) 來監聽 DOM 事件，並在事件觸發時執行對應的 JavaScript。用法：v-on:click="handler" 或 @click="handler"。

事件處理器 (handler) 的值可以是：

1. 內聯事件處理器：事件被觸發時執行的內聯 JavaScript 語句 (與 onclick 類似)。

2. 方法事件處理器：一個指向組件上定義的方法的屬性名或是路徑。

內聯事件處理器

內聯事件處理器通常用於簡單場景，例如：

const count = ref(0)

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

方法事件處理器

隨著事件處理器的邏輯變得愈發複雜，內聯代碼方式變得不夠靈活。因此 v-on 也可以接受一個方法名或對某個方法的調用。

const name = ref('Vue.js')

function greet(event) {
  alert(`Hello ${name.value}!`)
  // `event` 是 DOM 原生事件
  if (event) {
    alert(event.target.tagName)
  }
}

<!-- `greet` 是上面定義過的方法名 -->
<button @click="greet">Greet</button>

方法事件處理器會自動接收原生 DOM 事件並觸發執行。在上面的例子中，我們能夠通過被觸發事件的 event.target 訪問到該 DOM 元素。

方法與內聯事件判斷

模板編譯器會通過檢查 v-on 的值是否是合法的 JavaScript 標識符或屬性訪問路徑來斷定是何種形式的事件處理器。舉例來說，foo、foo.bar 和 foo['bar'] 會被視為方法事件處理器，而 foo() 和 count++ 會被視為內聯事件處理器。

在內聯處理器中調用方法

除了直接綁定方法名，你還可以在內聯事件處理器中調用方法。這允許我們向方法傳入自定義參數以代替原生事件：

function say(message) {
  alert(message)
}

<button @click="say('hello')">Say hello</button>
<button @click="say('bye')">Say bye</button>

在內聯事件處理器中訪問事件參數

有時我們需要在內聯事件處理器中訪問原生 DOM 事件。你可以向該處理器方法傳入一個特殊的 $event 變量，或者使用內聯箭頭函數：

<!-- 使用特殊的 $event 變量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用內聯箭頭函數 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

function warn(message, event) {
  // 這裡可以訪問原生事件
  if (event) {
    event.preventDefault()
  }
  alert(message)
}