2.4　事件處理

2.4.1　監聽事件

事件是指在瀏覽器中通過內置的處理器監視特定的條件或用戶行為，例如鼠標單擊瀏覽器窗口中的按鈕。瀏覽器中內置了大量的事件處理器，當這些事件處理器被觸發時，會執行一個綁定在該處理器上的函數，然后執行相應的內容。在Vue中可以使用v-on指令來完成事件函數的綁定。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.25所示。

在上面的示例代碼中，單擊“增加”按鈕，num屬性的值會被加1，并渲染到頁面中。

2.4.2　事件處理方法

在2.4.1節的示例代碼中，我們直接對num屬性進行了操作，但是在實際的項目開發中，不能這樣對屬性進行直接操作。因為很多事件處理的邏輯比較復雜，應該把操作數據的代碼寫到具體的函數中。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.26所示。

注意　v-on可以使用“@”代替，例如<button@click="add">增加</button>。

在調用事件函數時，我們還可以為事件函數傳入參數。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.27所示。

處理<button>標簽，我們還可以在其他DOM元素上添加事件，如果在事件函數中要獲取該事件所綁定的元素對象，可以使用事件函數的默認參數$ event傳參。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.28所示。

event對象代表事件的狀態，例如觸發事件所綁定的元素、當前鍵盤和鼠標按鍵的狀態、鼠標當前所在的位置等。當一個事件被觸發時，和當前這個事件相關的所有信息都會被保存到event對象中。

2.4.3　事件修飾符

在事件處理程序中調用event.preventDefault（）或event.stopPropagation（）是非常常見的需求。盡管我們可以在方法中輕松實現這點，但更好的方式是：方法只有純粹的數據邏輯，而不是去處理DOM事件細節。

為了解決這個問題，Vue.js為v-on提供了事件修飾符。使用修飾符可以節省很多代碼和時間，這樣便可以把更多的精力專注于處理程序的業務邏輯。

v-on的修飾符是由點開頭的指令后綴來表示的，在Vue中事件的修飾符主要有以下幾個。

（1）.stop：等同于JavaScript中的event.stopPropagation（），阻止事件冒泡。

（2）.self：只有觸發當前修飾的元素時才會執行事件函數，不受事件冒泡影響。

（3）.capture：使用事件捕獲模式，即內部元素觸發的事件先在此處理，然后才交由內部元素進行處理。

（4）.once：只會觸發一次。

（5）.prevent：等同于JavaScript中的event.preventDefault（），阻止默認事件發生。

（6）.passive：執行默認行為。

1．stop修飾符

stop修飾符用來阻止事件冒泡，禁止事件繼續向父級元素傳播。例如，在評論區，當單擊每條評論時，觸發評論外層的<div>事件，當單擊評論區內的用戶頭像時，可以查看用戶的個人信息。如果按照事件冒泡機制，當單擊評論區內的用戶頭像，即觸發了頭像上的時間，也會觸發評論區<div>的事件。

index.html文件代碼如下：

在瀏覽器中運行，單擊頭像會觸發clickAvatar（）事件函數，效果如圖2.29所示。根據事件冒泡機制，還會觸發clickComment（）事件函數，效果如圖2.30所示。

上面示例代碼中，單擊頭像會彈出兩次提示框，在實際開發中，我們不需要在單擊頭像后觸發外層的事件，此時可以使用Vue內置的修飾符.stop快速實現阻止事件冒泡的發生。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.31所示。

2．self修飾符

self修飾符可以跳過冒泡和捕獲事件，只有當時觸發了當前被修飾元素本身時，才執行綁定的事件函數。self修飾符會監聽事件是否直接作用在當前元素上。

index.html文件代碼如下：

在瀏覽器中運行，當單擊內層元素時，會觸發內部綁定的clickInner（）事件函數，效果如圖2.32所示。根據事件冒泡機制，會依次觸發中間層和外層的事件函數，由于在中間層添加了.self修飾符，所以會跳過中間層，直接觸發外層的事件函數，效果如圖2.33所示。

3．capture修飾符

capture修飾符可以為元素添加事件監聽器時使用事件捕獲模式，即內部元素觸發的事件先在此處理，然后才交由內部元素進行處理。使用capture修飾符可以改變事件冒泡的執行順序，先執行添加了該修飾符的元素。

在前面的示例代碼中，我們可以為中間層添加capture修飾符。

index.html文件代碼如下：

在瀏覽器中運行，單擊內層元素，應該先執行內層元素的事件函數，但此處先執行了中間層的clickCenter（）函數，效果如圖2.34所示。當執行完中間層的函數后，才去執行內層元素的clickInner（）函數，效果如圖2.35所示。最后執行外層元素的事件函數，如圖2.36所示。

4．once修飾符

有時我們需要對元素只執行一次操作，例如社交軟件上的點贊操作，可以使用once修飾符來完成。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.37所示。

5．prevent修飾符

prevent修飾符用于阻止瀏覽器的默認行為，例如<a>標簽，使用prevent修飾符后，當單擊超鏈接元素時，不會執行跳轉動作。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.38所示。

6．passive修飾符

passive修飾符可以執行默認行為，元素本身的默認行為可以直接執行，為什么還要再添加一個passive修飾符來執行默認行為呢？這是因為瀏覽器只有當內核線程執行到事件監聽器對應的JavaScript代碼時，才能知道內部是否調用preventDefault（）函數來阻止事件的默認行為，所以瀏覽器本身是沒有辦法對這種場景進行優化的。這種場景下，用戶的手勢事件無法快速產生，這會導致頁面無法快速執行滑動邏輯，從而讓用戶感覺到頁面卡頓。

簡單來說，當每次觸發元素上的事件時，瀏覽器都會去查詢一下是否有preventDefault（）函數阻止該次事件的默認行為。為元素添加passive修飾符，就是告訴瀏覽器不用再去檢查了，表示該元素沒有使用preventDefault（）函數阻止默認行為。

不要把.passive和.prevent一起使用，因為.prevent將會被忽略，同時瀏覽器可能會向你展示一個警告。需要記住，.passive會告訴瀏覽器你不想阻止事件的默認行為。

注意　在使用修飾符時，修飾符的順序很重要，相應的代碼會以同樣的順序產生。因 此，用v-on：click.prevent.self會阻止所有的單擊，而v-on：click.self.prevent只會阻止對元素自身的單擊。

2.4.4　按鍵修飾符

在Vue中支持3種鍵盤事件的監聽。

（1）keydown：鍵盤按鍵按下時觸發。

（2）keyup：鍵盤按鍵抬起時觸發。

（3）keypress：鍵盤按鍵按下與抬起間隔期間觸發。

在日常的開發中，我們經常需要用到鍵盤操作，例如，在搜索一個關鍵詞之后，用戶會習慣性地按下Enter鍵，以便于搜索結果。在傳統的網頁設計工作中，通常需要使用JavaScript中事件對象的keyCode屬性來判斷用戶到底按下的是哪個鍵，然后進行后續操作。

為了方便開發，Vue提供了在v-on監聽事件時添加按鍵修飾符的方式，來監聽用戶的按鍵操作。

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.39所示。

在上面的示例代碼中，為<input>輸入框的keydown事件添加了.a修飾符，表示當前的輸入框在輸入字母a時會被監聽，并觸發綁定的事件函數。當在<input>輸入框中輸入字母a時會觸發事件函數，但當輸入字母b時不會觸發事件函數。

為了方便使用按鍵修飾符，Vue提供了絕大多數常用的按鍵碼的別名，具體別名如下。

·　.enter

·　.tab

·　.delete（捕獲“刪除”和“退格”鍵）

·　.esc

·　.space

·　.up

·　.down

·　.left

·　.right

對于上面的案例可以使用按鍵修飾符的別名，代碼如下：

2.4.5　系統修飾鍵

可以使用下面的修飾符實現僅在按下相應按鍵時才觸發鼠標或鍵盤事件的監聽器。

·　.ctrl

·　.alt

·　.shift

·　.meta

index.html文件代碼如下：

在瀏覽器中運行的效果如圖2.40所示。

2.4.6　為什么在HTML中監聽事件

在前面各節的示例代碼中，所有的事件都是通過在HTML標簽中添加v-on屬性實現的，這種事件監聽的方式違背了關注點分離（Separation of Concern）這個長期以來的開發規范。之所以這樣編寫代碼，是因為所有的Vue.js事件處理方法和表達式都嚴格綁定在當前視圖的ViewModel上，它不會導致任何維護上的困難。實際上，使用v-on有以下幾個特點。

（1）便于在HTML模板中快速定位JavaScript對應的事件函數。

（2）無須編寫大量的JavaScript綁定事件的代碼，可以更專注于編寫業務邏輯。

（3）實現和DOM完全解耦，便于代碼測試。

（4）當一個ViewModel被銷毀時，所有的事件處理器都會被自動刪除。