1. 绑定事件
在模板中可以通过 @ 符号绑定事件，例如：
1 2 3 | <button @click="handleClick">点击我</button>这里绑定了一个 click 事件，并且绑定的函数是 handleClick。 |
2. 事件修饰符
事件修饰符是指在绑定事件时使用的一些特殊符号，用于修改事件的行为。常见的事件修饰符包括：
prevent：阻止默认行为
stop：阻止事件冒泡
capture：使用事件捕获模式
self：只有当事件是从事件源本身触发时才触发回调函数
once：只触发一次回调函数
passive：提高页面滚动的流畅度
例如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!-- 阻止默认行为 --><button @click.prevent="handleClick">点击我</button><!-- 阻止事件冒泡 --><button @click.stop="handleClick">点击我</button><!-- 使用事件捕获模式 --><button @click.capture="handleClick">点击我</button><!-- 只有当事件是从事件源本身触发时才触发回调函数 --><button @click.self="handleClick">点击我</button><!-- 只触发一次回调函数 --><button @click.once="handleClick">点击我</button><!-- 提高页面滚动的流畅度 --><button @click.passive="handleClick">点击我</button> |
.prevent 和 .stop 是两种不同的事件修饰符，虽然它们有一些相似之处，但是在事件处理中有不同的作用。
1 .prevent 用于阻止事件的默认行为，例如阻止 <a> 标签的默认跳转、阻止表单的默认提交等。
如果一个事件被 .prevent 修饰符修饰了，则在事件触发时，不会执行事件的默认行为，而只会执行`绑定的事件处理函数`。2 .stop 用于阻止事件的冒泡传播，事件冒泡是指当一个元素触发事件时，该事件会向父级元素传播。
如果一个事件被 .stop 修饰符修饰了，则在事件触发时，不会向上层元素传播该事件，而只会在当前元素内部进行处理。因此，.prevent 和 .stop 的作用是不同的，但是它们都能够阻止事件的默认行为。
.prevent 用于阻止元素的默认行为，.stop 用于阻止事件的冒泡传播。
3. 内置事件
在 UniApp 中，还有一些内置事件可以使用。这些事件是指在特定情况下自动触发的事件，例如：
onLoad：页面加载完成时触发
onReady：页面初次渲染完成时触发
onShow：页面展示时触发
onHide：页面隐藏时触发
onUnload：页面卸载时触发
这些事件可以在页面或组件中使用，例如：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | export default { onLoad() { console.log('页面加载完成'); }, onReady() { console.log('页面初次渲染完成'); }, onShow() { console.log('页面展示'); }, onHide() { console.log('页面隐藏'); }, onUnload() { console.log('页面卸载'); }} |
4. 自定义事件
在 UniApp 中，还可以通过 uni. e m i t 和 u n i . emit 和 uni. emit和uni.on 方法来实现自定义事件的处理。例如：
1 2 3 4 5 6 7 8 9 10 | // 发送自定义事件uni.$emit('myEvent', {data: '自定义事件参数'});// 监听自定义事件uni.$on('myEvent', (data) => { console.log('接收到自定义事件', data);});这里通过 uni.$emit 发送了一个名为 myEvent 的自定义事件，并传递了一个参数 {data: '自定义事件参数'}。在需要监听该事件的地方，可以使用 uni.$on 方法来监听该事件，并在回调函数中处理事件。 |
5. 事件对象
在事件处理函数中，可以通过 $event 参数来获取事件对象，事件对象包含了事件的一些信息，例如：
type：事件类型
target：事件源
currentTarget：当前组件
detail：自定义数据
例如：
1 2 3 4 5 6 7 8 9 10 | <button @click="handleClick">点击我</button>methods: { handleClick($event) { console.log('事件类型', $event.type); console.log('事件源', $event.target); console.log('当前组件', $event.currentTarget); console.log('自定义数据', $event.detail); }} |
以上就是 UniApp 中常用的事件处理方式，包括绑定事件、事件修饰符、内置事件、自定义事件和事件对象。
掌握这些知识，可以更加灵活地处理事件，实现丰富的用户交互效果。