上一篇：
uni-app 跨端开发 H5、小程序、IOS、Android（五）：uni-app 数据绑定
大家好，我是黑马腾云。
这是一个原创系列连载文章，基于企业真实项目案例分享经验，带你快速入门 uni-app 开发！欢迎点击头像关注，避免迷路！
上一篇文章分析了数据绑定，本文来讨论 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 设计的时候要默认有事件冒泡机制呢？
评论区见。
作者介绍：
黑马腾云，码农、创业者、终身学习者！
乐于分享技术、创业、人生思考。关注我，一起为人生喝彩！
上一篇：
uni-app 跨端开发 H5、小程序、IOS、Android（五）：uni-app 数据绑定
评论