小程序框架 / 视图层 / 事件系统 / 介绍 (qq.com)
WXML的冒泡事件列表
事件传参
通过data-来传递事件
如:
<view bindtap="triggers" data-idType="1">点击我</view>
data-idType就是传递的参数
在事件处理函数中获取参数
Page({
data: {},
//点击事件
triggers(e) {
console.log(e.currentTarget.dataset.idtype); // 1
},
})
e.target, e.currentTarget 区别
e.target表示触发事件的元素，即实际点击的元素。e.currentTarget表示绑定事件处理程序的元素，即当前元素。
应该尽量通过e.currentTarget来获取传递的参数
阻止事件冒泡
用 catch 来绑定事件。与 bind 不同， catch 会阻止事件向上冒泡。
事件对象
小程序用ts时点击事件e的类型
onChange(event:WechatMiniprogram.CustomEvent<string[]>){
this.setData({
activeNames: event.detail,
});
},
小程序用ts时,Page类型定义
// pages/base/index/index.ts
Page<{
activeNames: string[];
}, {
onChange(event: WechatMiniprogram.CustomEvent<string[]>): void;
onToPage(event:WechatMiniprogram.BaseEvent): void;
}>({
/**
* 页面的初始数据
*/
data: {
activeNames:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
},
onChange(event:WechatMiniprogram.CustomEvent<string[]>){
this.setData({
activeNames: event.detail,
});
},
onToPage(event:WechatMiniprogram.BaseEvent){
console.log(event.currentTarget.dataset,event.currentTarget.dataset.page)
wx.navigateTo({url:event.currentTarget.dataset.page})
}
})
小程序用ts时点击事件e的类型_wechatminiprogram.baseevent-CSDN博客
