vue事件修飾符

事件處理

如果需要在內(nèi)聯(liá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: '測試冒泡事件' } },
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)事件。比如我們頁面的<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>

img

.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>

Vue的Methods和事件處理

.once 只執(zhí)行一次點(diǎn)擊

如果我們在@click事件上添加.once修飾符，只要點(diǎn)擊按鈕只會(huì)執(zhí)行一次。

鍵盤修飾符

在JavaScript事件中除了前面所說的事件，還有鍵盤事件，也經(jīng)常需要監(jiān)測常見的鍵值。在Vue中允許v-on在監(jiān)聽鍵盤事件時(shí)添加關(guān)鍵修飾符。記住所有的keyCode比較困難，所以Vue為最常用的鍵盤事件提供了別名：

  • .enter：回車鍵

  • .tab：制表鍵

  • .delete：含delete和backspace鍵

  • .esc：返回鍵

  • .space: 空格鍵

  • .up：向上鍵

  • .down：向下鍵

  • .left：向左鍵

  • .right：向右鍵

img

鼠標(biāo)修飾符

鼠標(biāo)修飾符用來限制處理程序監(jiān)聽特定的滑鼠按鍵。常見的有：

  • .left：鼠標(biāo)左鍵

  • .middle：鼠標(biāo)中間滾輪

  • .right：鼠標(biāo)右鍵

修飾鍵

可以用如下修飾符開啟鼠標(biāo)或鍵盤事件監(jiān)聽，使在按鍵按下時(shí)發(fā)生響應(yīng)：

  • .ctrl

  • .alt

  • .shift

  • .meta

自定義按鍵修飾符別名

在Vue中可以通過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來給元素綁定事件，而為了更好的處理邏輯方面的事物，Vue提供了一個(gè)methods。在methods中定義一些方法，這些方法可以幫助我們處理一些邏輯方面的事情。而在這篇文章中，我們主要介紹了一些事件的修飾符，比如常見的阻止事件冒泡，鍵盤修飾符等。除此之外，還提供了config.keyCodes提供自定義按鍵修飾符別名。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容