事件處理
如果需要在內(nèi)聯(lián)語(yǔ)句處理器中訪問(wèn)原生DOM事件原献×罂可以使用特殊變量$event，把它傳入到methods中的方法中姑隅。
在Vue中熏纯，事件修飾符處理了許多DOM事件的細(xì)節(jié)，讓我們不再需要花大量的時(shí)間去處理這些煩惱的事情粤策，而能有更多的精力專注于程序的邏輯處理樟澜。在Vue中事件修飾符主要有：
.stop：等同于JavaScript中的
event.stopPropagation()，防止事件冒泡.prevent：等同于JavaScript中的
event.preventDefault()叮盘，防止執(zhí)行預(yù)設(shè)的行為（如果事件可取消秩贰，則取消該事件，而不停止事件的進(jìn)一步傳播）.capture：與事件冒泡的方向相反柔吼，事件捕獲由外到內(nèi)
.self：只會(huì)觸發(fā)自己范圍內(nèi)的事件毒费，不包含子元素
.once：只會(huì)觸發(fā)一次
.stop 防止事件冒泡
冒泡事件：嵌套兩三層父子關(guān)系，然后所有都有點(diǎn)擊事件愈魏，點(diǎn)擊子節(jié)點(diǎn)觅玻，就會(huì)觸發(fā)從內(nèi)至外 子節(jié)點(diǎn)-》父節(jié)點(diǎn)的點(diǎn)擊事件
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n17" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<div id="app">
<div class="outeer" @click="outer">
<div class="middle" @click="middle">
<button @click="inner">點(diǎn)擊我(_)</button>
</div>
</div>
<p>{{ message }}</p>
</div>
?
let app = new Vue({
el: '#app',
data () {
return { message: '測(cè)試冒泡事件' } },
methods: {
inner: function () {
this.message = 'inner： 這是最里面的Button'
},
middle: function () {
this.message = 'middle: 這是中間的Div'
},
outer: function () {
this.message = 'outer: 這是外面的Div'
}
}
})</pre>
防止冒泡事件的寫法是：在點(diǎn)擊上加上.stop相當(dāng)于在每個(gè)方法中調(diào)用了等同于event.stopPropagation()，點(diǎn)擊子節(jié)點(diǎn)不會(huì)捕獲到父節(jié)點(diǎn)的事件
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n19" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<div id="app">
<div class="outeer" @click.stop="outer">
<div class="middle" @click.stop="middle">
<button @click.stop="inner">點(diǎn)擊我(_)</button>
</div>
</div>
</div></pre>
.prevent取消默認(rèn)事件
.prevent等同于JavaScript的event.preventDefault()培漏，用于取消默認(rèn)事件溪厘。比如我們頁(yè)面的<a href="#">標(biāo)簽，當(dāng)用戶點(diǎn)擊時(shí)牌柄，通常在瀏覽器的網(wǎng)址列出#：
.capture 捕獲事件
捕獲事件：嵌套兩三層父子關(guān)系畸悬，然后所有都有點(diǎn)擊事件，點(diǎn)擊子節(jié)點(diǎn)珊佣，就會(huì)觸發(fā)從外至內(nèi) 父節(jié)點(diǎn)-》子節(jié)點(diǎn)的點(diǎn)擊事件
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="html" cid="n24" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<div id="app">
<div class="outeer" @click.capture="outer">
<div class="middle" @click.capture="middle">
<button @click.capture="inner">點(diǎn)擊我(_)</button>
</div>
</div>
</div></pre>
.self
修飾符.self只會(huì)觸發(fā)自己范圍內(nèi)的事件蹋宦，不會(huì)包含子元素。
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n29" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<div id="app">
<div class="outeer" @click.self="outer">
<div class="middle" @click.self="middle">
<button @click.stop="inner">點(diǎn)擊我(_)</button>
</div>
</div>
</div></pre>
.once 只執(zhí)行一次點(diǎn)擊
如果我們?cè)?code>@click事件上添加.once修飾符咒锻，只要點(diǎn)擊按鈕只會(huì)執(zhí)行一次冷冗。
鍵盤修飾符
在JavaScript事件中除了前面所說(shuō)的事件，還有鍵盤事件惑艇，也經(jīng)常需要監(jiān)測(cè)常見(jiàn)的鍵值蒿辙。在Vue中允許v-on在監(jiān)聽(tīng)鍵盤事件時(shí)添加關(guān)鍵修飾符。記住所有的keyCode比較困難敦捧，所以Vue為最常用的鍵盤事件提供了別名：
.enter：回車鍵
.tab：制表鍵
.delete：含
delete和backspace鍵.esc：返回鍵
.space: 空格鍵
.up：向上鍵
.down：向下鍵
.left：向左鍵
.right：向右鍵
鼠標(biāo)修飾符
鼠標(biāo)修飾符用來(lái)限制處理程序監(jiān)聽(tīng)特定的滑鼠按鍵须板。常見(jiàn)的有：
.left：鼠標(biāo)左鍵
.middle：鼠標(biāo)中間滾輪
.right：鼠標(biāo)右鍵
修飾鍵
可以用如下修飾符開(kāi)啟鼠標(biāo)或鍵盤事件監(jiān)聽(tīng)，使在按鍵按下時(shí)發(fā)生響應(yīng)：
.ctrl
.alt
.shift
.meta
自定義按鍵修飾符別名
在Vue中可以通過(guò)config.keyCodes自定義按鍵修飾符別名兢卵。例如，由于預(yù)先定義了keycode 116（即F5）的別名為f5绪颖，因此在文字輸入框中按下F5秽荤，會(huì)觸發(fā)prompt方法甜奄，出現(xiàn)alert。
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n77" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: normal; background: rgb(51, 51, 51); position: relative !important; padding: 10px 10px 10px 30px; width: inherit; color: rgb(184, 191, 198); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">
<div id="app">
<input type="text" v-on:keydown.f5="prompt()">
</div>
?
Vue.config.keyCodes.f5 = 116;
?
let app = new Vue({
el: '#app',
methods: {
prompt: function() {
alert('我是 F5窃款！');
}
}
});</pre>
總結(jié)
在Vue中课兄，使用v-on來(lái)給元素綁定事件，而為了更好的處理邏輯方面的事物晨继，Vue提供了一個(gè)methods烟阐。在methods中定義一些方法，這些方法可以幫助我們處理一些邏輯方面的事情紊扬。而在這篇文章中蜒茄，我們主要介紹了一些事件的修飾符，比如常見(jiàn)的阻止事件冒泡餐屎，鍵盤修飾符等檀葛。除此之外，還提供了config.keyCodes提供自定義按鍵修飾符別名腹缩。
