Vue提供了很好用的模板語法，包括插值語法 {{ }} 和指令語法v-？。使用指令語法很容易就可以為文檔對象添加事件。

比較常用到的事件就是鼠標(biāo)事件了。當(dāng)用戶使用鼠標(biāo)點(diǎn)擊網(wǎng)頁上的某個(gè)元素，或者使用鍵盤按下某個(gè)鍵，會執(zhí)行對應(yīng)的回調(diào)（callback），進(jìn)而在短時(shí)間內(nèi)產(chǎn)生動作。

比如給button標(biāo)簽添加一個(gè)click（點(diǎn)擊）事件，使用插值語法的簡寫形式（省略事件綁定語法v-on:click）：@click=“showinformation”，即當(dāng)鼠標(biāo)點(diǎn)擊時(shí)，執(zhí)行showinformation這個(gè)函數(shù)。

接著在script結(jié)構(gòu)的methods配置項(xiàng)中編寫函數(shù)的執(zhí)行步驟和邏輯，就完成了整個(gè)事件。

上述代碼執(zhí)行后，點(diǎn)擊按鈕，會在控制臺輸出事件實(shí)例和參數(shù)。

在鼠標(biāo)事件中，常會用到一些修飾符，來起到對事件的限定作用，常用的如：prevent、stop、once。

prevent：阻止默認(rèn)事件

如對一個(gè)超鏈接標(biāo)簽使用@click.prevent="showinfor"，點(diǎn)擊超鏈接，在執(zhí)行完事件回調(diào)后，超鏈接并不會發(fā)生跳轉(zhuǎn)。這些功能真的很秒。比如阻止一些釣魚鏈接之類的。

stop：阻止事件冒泡

先討論一下事件冒泡和捕獲這個(gè)概念。當(dāng)元素嵌套的父元素和子元素上都有一個(gè)相同（名稱和類型均相同）的事件，此時(shí)父元素只是一個(gè)容器。當(dāng)我們觸發(fā)子元素事件，并且產(chǎn)生回調(diào)后，父元素（容器）也會執(zhí)行這個(gè)事件，并且總是由內(nèi)向外的執(zhí)行順序，這就是事件冒泡。不過，當(dāng)我們點(diǎn)擊外層父元素時(shí)，是不會觸發(fā)子元素事件的。再說到事件捕獲，在觸發(fā)事件后，未產(chǎn)生回調(diào)前，有一個(gè)過程，就是事件捕獲，它總是由外到內(nèi)的。如剛剛那個(gè)例子，即使我們點(diǎn)擊的是子元素，但是捕獲的過程卻是由父元素到子元素的，所以當(dāng)我們直接點(diǎn)擊父元素，一開始就捕獲到了對應(yīng)事件，是不會觸發(fā)子元素事件的。

@click.stop="showinfor"，stop修飾符的作用就是阻止事件冒泡，在上面那個(gè)例子上，點(diǎn)擊子元素就不會觸發(fā)父元素的事件。

once：限制事件只作用一次，多次點(diǎn)擊只有第一次有效。

還是超鏈接的例子，@click.once="showinfor"，加了once修飾符后，只有第一次點(diǎn)擊超鏈接會發(fā)生跳轉(zhuǎn)，但會執(zhí)行事件回調(diào)。

?有點(diǎn)意思的是，prevent修飾符一次都不允許跳轉(zhuǎn)，和once修飾符只允許跳轉(zhuǎn)一次。

另外，這些限定功能不同的修飾符，是可以連著寫的，如@click.stop.prevent=”showinfor”，既能阻止事件冒泡，也能阻止默認(rèn)事件，

當(dāng)然了，鼠標(biāo)事件除了點(diǎn)擊，肯定還有其他事件，從原生js來看，應(yīng)該還有mouseup、mousedown等等不同場景，取決于項(xiàng)目實(shí)際應(yīng)用場景。

鍵盤事件

比較常用的鍵盤事件應(yīng)該就是keyup（按下釋放觸發(fā)）、keydown（按下即觸發(fā)）了。

同樣使用指令語法（v-on:）@keyup

通過使用Vue提供的一些常用鍵盤別名，輕松創(chuàng)建鍵盤事件

enter鍵事件：@keyup.enter="showinfor"? ?@keydown.enter="showinfor"

esc鍵事件：@keyup.esc="showinfor"? ?@keydown.esc="showinfor"

space鍵事件：@keyup.space="showinfor"? ?@keydown.space="showinfor"

方向鍵事件：@keyup.up="showinfor"? ?@keydown.up="showinfor"? ?其他方向均同

特別要注意的是：幾個(gè)特別的鍵，ctrl、alt、shift、win(meta)鍵只能搭配keydown使用，因?yàn)檫@幾個(gè)特殊的按鍵本身帶有特定的功能，當(dāng)按下時(shí)就會觸發(fā)跳轉(zhuǎn)，如果搭配keyup，則來不及產(chǎn)生功能回調(diào)就已經(jīng)跳走了。

另外，對于這幾個(gè)系統(tǒng)修飾鍵，還可以搭配其他非功能鍵，實(shí)現(xiàn)組合鍵事件，如@keydown.ctrl.y="showinfor"觸發(fā)事件需要同時(shí)按下ctrl+y鍵才行。

另外，鍵盤事件不知道有沒有類似于鼠標(biāo)事件那樣的阻止跳轉(zhuǎn)之類的事件修飾符。

再補(bǔ)充一個(gè)鼠標(biāo)滾輪事件

@scroll="shonwinfor"

@wheel="showinfor"

前者針對的是窗口滾動條，當(dāng)滾動條動作，就會執(zhí)行相應(yīng)的回調(diào)，它的特點(diǎn)是滾動條要在回調(diào)結(jié)束后才能動作，所以可以為其加一個(gè)passive修飾符，這樣就可以達(dá)到類似異步執(zhí)行的效果。

后者針對的是鼠標(biāo)滾輪，只要鼠標(biāo)滾輪動作，就會執(zhí)行相應(yīng)的回調(diào)

以上均為小白拙見。文章來源地址http://www.zghlxwxcb.cn/news/detail-501435.html

到了這里，關(guān)于【前端學(xué)習(xí)日記】Vue中的鼠標(biāo)事件和鍵盤事件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！