2.4　事件處理

2.4.1　監(jiān)聽事件

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

index.html文件代碼如下：

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

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

2.4.2　事件處理方法

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

index.html文件代碼如下：

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

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

在調(diào)用事件函數(shù)時，我們還可以為事件函數(shù)傳入?yún)?shù)。

index.html文件代碼如下：

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

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

index.html文件代碼如下：

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

event對象代表事件的狀態(tài)，例如觸發(fā)事件所綁定的元素、當(dāng)前鍵盤和鼠標(biāo)按鍵的狀態(tài)、鼠標(biāo)當(dāng)前所在的位置等。當(dāng)一個事件被觸發(fā)時，和當(dāng)前這個事件相關(guān)的所有信息都會被保存到event對象中。

2.4.3　事件修飾符

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

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

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

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

（2）.self：只有觸發(fā)當(dāng)前修飾的元素時才會執(zhí)行事件函數(shù)，不受事件冒泡影響。

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

（4）.once：只會觸發(fā)一次。

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

（6）.passive：執(zhí)行默認行為。

1．stop修飾符

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

index.html文件代碼如下：

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

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

index.html文件代碼如下：

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

2．self修飾符

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

index.html文件代碼如下：

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

3．capture修飾符

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

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

index.html文件代碼如下：

在瀏覽器中運行，單擊內(nèi)層元素，應(yīng)該先執(zhí)行內(nèi)層元素的事件函數(shù)，但此處先執(zhí)行了中間層的clickCenter（）函數(shù)，效果如圖2.34所示。當(dāng)執(zhí)行完中間層的函數(shù)后，才去執(zhí)行內(nèi)層元素的clickInner（）函數(shù)，效果如圖2.35所示。最后執(zhí)行外層元素的事件函數(shù)，如圖2.36所示。

4．once修飾符

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

index.html文件代碼如下：

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

5．prevent修飾符

prevent修飾符用于阻止瀏覽器的默認行為，例如<a>標(biāo)簽，使用prevent修飾符后，當(dāng)單擊超鏈接元素時，不會執(zhí)行跳轉(zhuǎn)動作。

index.html文件代碼如下：

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

6．passive修飾符

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

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

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

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

2.4.4　按鍵修飾符

在Vue中支持3種鍵盤事件的監(jiān)聽。

（1）keydown：鍵盤按鍵按下時觸發(fā)。

（2）keyup：鍵盤按鍵抬起時觸發(fā)。

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

在日常的開發(fā)中，我們經(jīng)常需要用到鍵盤操作，例如，在搜索一個關(guān)鍵詞之后，用戶會習(xí)慣性地按下Enter鍵，以便于搜索結(jié)果。在傳統(tǒng)的網(wǎng)頁設(shè)計工作中，通常需要使用JavaScript中事件對象的keyCode屬性來判斷用戶到底按下的是哪個鍵，然后進行后續(xù)操作。

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

index.html文件代碼如下：

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

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

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

·　.enter

·　.tab

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

·　.esc

·　.space

·　.up

·　.down

·　.left

·　.right

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

2.4.5　系統(tǒng)修飾鍵

可以使用下面的修飾符實現(xiàn)僅在按下相應(yīng)按鍵時才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。

·　.ctrl

·　.alt

·　.shift

·　.meta

index.html文件代碼如下：

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

2.4.6　為什么在HTML中監(jiān)聽事件

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

（1）便于在HTML模板中快速定位JavaScript對應(yīng)的事件函數(shù)。

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

（3）實現(xiàn)和DOM完全解耦，便于代碼測試。

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