事件對象 是瀏覽器在觸發(fā)事件（比如點擊按鈕）時，自動生成的一個 “數(shù)據(jù)包”，里面存著事件的詳細信息（比如點了哪個按鈕、點在頁面的坐標、事件類型是點擊還是輸入）。

Vue 里有 2 種方式拿到這個 “數(shù)據(jù)包”，本質(zhì)都是為了拿到事件信息做交互，只是用法場景不同。

方式 1：方法參數(shù)自動接收（最簡單常用）

場景：你只需要事件對象，不需要傳額外參數(shù)時，用這種方式。

代碼示例

<!-- 按鈕點擊時，Vue 會自動把事件對象傳給 greet 方法 -->
<button @click="greet">點我Greet</button>

greet(cusEvent) { 
  // cusEvent 就是事件對象！名字你隨便?。ū热?e、event、myEvent 都可以）
  console.log(cusEvent.target.tagName); // 打印觸發(fā)事件的標簽名（比如 BUTTON）
}

類比理解

把 @click="greet" 想象成：

• 你點按鈕 → 瀏覽器 “扔出” 一個事件對象 → Vue 自動 “接住”，并把它當 “默認禮物” 塞給 greet 方法。
• 方法里的參數(shù)名（比如 cusEvent），就像你給這個 “禮物” 起的外號，叫啥都行，只要能拿到里面的信息。

方式 2：用 $event 手動傳遞（需要傳額外參數(shù)時用）

場景：你不僅需要事件對象，還想傳其他參數(shù)（比如 ID、狀態(tài)）時，必須用 $event 手動把事件對象傳過去。

代碼示例

<!-- 點擊時，主動用 $event 把事件對象傳給 greet2，同時還能傳其他參數(shù)（比如 '額外信息'） -->
<button @click="greet2('額外信息', $event)">點我Greet2</button>

greet2(msg, event) { 
  // msg 是你傳的 '額外信息'，event 是 $event 對應的事件對象，這個名字可以自己定義
  console.log(msg); // 打?。侯~外信息
  console.log(event.clientX); // 打印點擊位置的 X 坐標
}

類比理解

把 @click="greet2('額外信息', $event)" 想象成：

你點按鈕時，想給 greet2 方法傳 2 個 “禮物”：

• 第一個禮物：你手動寫的 '額外信息'（自定義參數(shù)）。
• 第二個禮物：必須用 $event 這個 “固定包裝”，把事件對象包起來傳過去。

方法里的參數(shù)（msg, event）要和傳遞順序?qū)?，這樣才能正確拿到兩個 “禮物”。

兩種方式的核心區(qū)別

舉個生活例子加深理解

假設你是餐廳服務員（方法），客人（按鈕）點餐（觸發(fā)事件）：

• 方式 1：客人只說 “結(jié)賬”（@click="greet"），系統(tǒng)自動給你遞上 “賬單”（事件對象），你直接處理賬單（greet(cusEvent)）。
• 方式 2：客人說 “結(jié)賬，再加一份小吃”（@click="greet2('加小吃', $event)"），你需要同時拿到 “賬單”（事件對象，用 $event 傳）和 “加小吃” 的要求（自定義參數(shù)），再一起處理。

總結(jié)

• 事件對象 是瀏覽器給的 “事件詳情包”，Vue 提供了 2 種拿包方式。
• 簡單場景用 方式 1（自動接收），復雜場景（需要傳額外數(shù)據(jù)）用 方式 2（$event 手動傳）。
• 記住 $event 是 Vue 規(guī)定的 “傳事件對象的固定語法”，而方法里的參數(shù)名可以自己隨便取～

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論