點擊上方“自學幫”，選擇“添加關注”
各種福利第一時間送達！
大家好，我是黑馬騰雲，碼農、連續創業者。
上一篇文章分析了數據綁定，本文來討論uni-app事件綁定。
用戶與界面進行交互，自然是要通過事件，因此我們來看看事件綁定的辦法以及uni-app提供的一些事件。
一、事件監聽指令
事件監聽使用v-on指令。
語法格式：
v-on:事件名，也可以簡寫爲@
示例：
<template>
<view>
<button v-on:click="counter += 1">點擊計數</button>
<!--<button @click="counter += 1">點擊計數</button>-->
<!--簡寫-->
<text>我被點擊了{{ counter }} 次.</text>
</view>
</template>
<script>
export default {
data() {
return {
counter: 0
}
}
}
</script>監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。
二、事件處理方法
然而許多事件處理邏輯會更爲複雜，如上示例，直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。
因此 v-on 還可以接收一個需要調用的方法名稱。
示例：
<template>
<view>
<button v-on:click="greet">問好</button> <!--函數名加不加括號都可以-->
</view>
</template>
<script>
export default {
data() {
return {
name: '黑馬騰雲'
}
},
methods: {
greet(event) {
// event 是原生 DOM 事件
console.log(event);
uni.showToast({
title: 'Hello ' + this.name + '!'
});
}
}
}
</script>
內聯處理器中的方法
除了直接綁定到一個方法，也可以在內聯 JavaScript 語句中調用方法：
<template>
<view>
<button v-on:click="say('hi 黑馬騰雲')">問好</button>
</view>
</template>
<script>
export default {
methods: {
say(message) {
uni.showToast({
title: message
});
}
}
}
</script>
有時也需要在內聯語句處理器中訪問原始的 DOM 事件。可以用特殊變量 $event 把它傳入方法：
<template>
<view>
<button v-on:click="warn('表單不能提交了.', $event)">
提交
</button>
</view>
</template>
<script>
export default {
methods: {
warn(message, event) {
// 現在我們可以訪問原生事件對象
if (event) {
event.preventDefault() //阻止表單提交
}
uni.showToast({
title: message
});
}
}
}
</script>
preventDefault() 方法,取消事件的默認動作。
該方法將通知 Web 瀏覽器不要執行與事件關聯的默認動作（如果存在這樣的動作）。例如，如果 type 屬性是 "submit"，在事件傳播的任意階段可以調用任意的事件句柄，通過調用該方法，可以阻止提交表單。注意，如果 Event 對象的 cancelable 屬性是 fasle，那麼就沒有默認動作，或者不能阻止默認動作。無論哪種情況，調用該方法都沒有作用。
三、事件修飾符
1、常用事件修飾符
修飾符 (modifier) 是以半角句號 . 指明的特殊後綴，用於指出一個指令應該以特殊方式綁定。例如，.prevent 修飾符告訴 v-on 指令對於觸發的事件調用 event.preventDefault()
v-on 提供了事件修飾符:
.stop: 各平臺均支持， 使用時會阻止事件冒泡，在非 H5 端同時也會阻止事件的默認行爲
.native: 監聽原生事件，僅在 H5 平臺支持
.prevent: 僅在 H5 平臺支持
.capture: 僅在 H5 平臺支持
.self: 僅在 H5 平臺支持
.once: 僅在 H5 平臺支持
.passive: 僅在 H5 平臺支持
使用修飾符時，順序很重要；相應的代碼會以同樣的順序產生。因此，用 v-on:click.prevent.self 會阻止所有的點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。
注意事項
爲兼容各端，事件需使用 v-on 或 @ 的方式綁定，請勿使用小程序端的 bind 和 catch 進行事件綁定。
若需要禁止蒙版下的頁面滾動，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用來處理 touchmove 的事件，也可以是一個空函數。
<view class="mask" @touchmove.stop.prevent="moveHandle"></view>按鍵修飾符：uni-app 運行在手機端，沒有鍵盤事件，所以不支持按鍵修飾符。
2、阻止事件冒泡
<!-- 阻止單擊事件繼續傳播 -->
<view v-on:click.stop="doThis"></view>stop可以阻止事件冒泡，那什麼是事件冒泡？
當一個元素接收到事件的時候，會把他接收到的事件傳給自己的父級，一直到window。
事件捕獲和事件冒泡屬於兩個相反的過程，見下圖：
有時候根據業務需要，我們要阻止冒泡事件
示例：
<template>
<view class="father" @click="fatherClick()">
<button class="children" @click.stop="childrenClick"> <!--添加.stop即可阻止事件冒泡-->
事件冒泡
</button>
</view>
</template>
<script>
export default {
methods: {
childrenClick() {
alert("children");
},
fatherClick(){
alert("father");
}
}
}
</script>
<style>
.father{
background-color: #0A98D5;
height: 200rpx;
}
.children{
margin: 30rpx;
width: 500rpx;
}
</style>如上示例，單擊按鈕後，只會執行按鈕指定的事件。
如果把button事件後的.stop去掉，則會發生事件冒泡，當點擊button後，它父級事件fatherClick也會執行。
四、uni-app的事件映射表
// 事件映射表，左側爲 WEB 事件，右側爲 uni-app 對應事件
{
click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap', //推薦使用longpress代替
input: 'input',
change: 'change',
submit: 'submit',
blur: 'blur',
focus: 'focus',
reset: 'reset',
confirm: 'confirm',
columnchange: 'columnchange',
linechange: 'linechange',
error: 'error',
scrolltoupper: 'scrolltoupper',
scrolltolower: 'scrolltolower',
scroll: 'scroll'
}以input爲例，演示常見事件使用
<template>
<view>
<input type="text" class="txt" @focus="focus" @blur="blur" @confirm="confirm" @click="click" @tap="tap" @longpress="longpress"
@longtap="longtap" @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove" @touchcancle="touchcancle" />
</view>
</template>
<script>
export default {
data() {
return {}
},
methods: {
focus() {
console.log("獲得焦點")
},
blur() {
console.log("失去焦點")
},
confirm() {
console.log("點擊完成按鈕/回車鍵") //pc端按回車鍵觸發、手機端鍵盤完成按鈕觸發
},
click() {
console.log("組件單擊事件")
},
tap() {
console.log("組件被觸摸") //如果click和tap同時存在，在pc端和手機端都只有tap被觸發；如果只任意寫一個，則也能觸發
},
longpress() {
console.log("長時間按住")
},
longtap() {
console.log("長時間觸摸") //longpress和longtap同時存在，pc端和手機端都是longtap覆蓋longpress；如果只任意寫一個，則也能觸發
},
touchstart() {
console.log("觸摸開始")
},
touchend() {
console.log("觸摸結束")
},
touchmove() {
console.log("手指移動")
},
touchcancle() {
console.log("觸摸被打斷")
}
},
}
</script>
<style>
.txt {
border: 1px solid #000000;
width: 400rpx;
margin: 20rpx;
}
</style>
事件相關知識就寫到這裏，下一篇演示uni-app中組件的渲染，歡迎持續關注。
摸魚時間
既然大多數情況下我們都要阻止事件冒泡，那爲什麼js設計的時候要默認有事件冒泡機制呢？
咱們留言區見！
更多精彩內容，歡迎持續關注。有任何疑問歡迎添加作者個人微信進行交流。
一切知識都源於記憶，所有成功都需要付出！我們一起見證堅持和拼搏的力量！
--公衆號：自學幫
本文分享自微信公衆號 - 自學幫（zixuebang8）。
如有侵權，請聯繫 [email protected] 刪除。
本文參與“OSC源創計劃”，歡迎正在閱讀的你也加入，一起分享。