uniapp事件介绍
uniapp 事件基础概念
uniapp 中的事件系统基于 Vue.js，允许开发者通过事件实现组件间的通信或响应用户交互。事件分为原生事件和自定义事件，支持冒泡机制和事件修饰符。
事件绑定语法
在模板中通过 @ 或 v-on: 绑定事件：
<button @click="handleClick">点击触发</button>
<!-- 或 -->
<button v-on:click="handleClick">点击触发</button>常用事件类型
- 触摸事件：
@touchstart,@touchmove,@touchend - 点击事件：
@click,@longpress（长按） - 表单事件：
@input,@change,@submit - 生命周期事件：如
@load（图片加载完成）
事件修饰符
uniapp 支持 Vue 的事件修饰符：
.stop：阻止事件冒泡.prevent：阻止默认行为.capture：使用捕获模式.self：仅当事件源是自身时触发.once：只触发一次
示例：
<view @click.stop="handleClick">阻止冒泡</view>
<form @submit.prevent="handleSubmit">阻止表单默认提交</form>自定义事件
父子组件间可通过自定义事件通信：
- 子组件触发：
this.$emit('eventName', data) - 父组件监听：
<child-component @eventName="handler"></child-component>
事件对象
事件处理函数默认接收 event 对象，包含以下常用属性：
type：事件类型（如"click"）target：触发事件的 DOM 元素currentTarget：当前绑定的 DOM 元素detail：自定义数据（如$emit传递的参数）
跨平台注意事项
- 部分事件在不同平台表现可能不同（如
longpress在 H5 端需手动实现）。 - 使用
uni.$on和uni.$emit可实现全局事件总线，适用于非父子组件通信。
示例代码
// 页面逻辑
methods: {
handleClick(event) {
console.log('事件类型:', event.type);
uni.showToast({ title: '点击事件触发' });
}
}<!-- 组件通信示例 -->
<child-component @customEvent="handleCustom"></child-component>通过合理利用事件系统，可以高效实现 uniapp 应用的交互逻辑。
