事件对象分为冒泡事件和非冒泡事件,冒泡事件指的是当一个组件上的事件被触发后,这个事件会向父容器节点传递,非冒泡事件则不会向父容器传递,在小程序中时间的绑定是通过bind或者catch关键字+事件名来绑定事件的如bindTap或者catchTap,其中bindTap不能阻断冒泡事件而catchTap可以阻止冒泡事件。
在WXML中这些事件默认是冒泡的:touchstart:手指触摸动作开始touchmove:手指触摸后移动,touchcancel:手指触摸动作被打断,如来电,弹窗等,touchend:触摸结束,tap:触摸后立马离开,longtap:触摸超过350mm离开。
如下的冒泡事件(注意bind方式和catch方式控制台打印的不同结果):view1 "> view2 <view bindtap="tap3">view3</view> </view> </view> <view bindtap="tap1"> view1 <view catchtap="tap2"> view2 <view bindtap="tap3">view3</view> </view> </view> Page({ tap1:function(){ console.log("view1"); }, tap2: function () { console.log("view2"); }, tap3: function () { console.log("view3"); } })
bind绑定的点击view1只输出一次后台日志;点击view2会输出两次一次当前节点一次父节点;点击view3会输出3次,当前节点,父节点,祖父节点。
catch绑定的点击view1只输出一次因为view1没有父节点;点击view2也只打印了一次为什么呢,因为view2
的事件绑定用的是catch,将冒泡事件阻断掉了;同理点击view3执行了两次,也是到view2就阻断掉了,可见只要遇到catch冒泡事件就会在当前这个节点中断掉
- 事件对象
<!--事件对象-->
<view bindtap="myEvenet"id="parent">事件对象
<view bindtap="myEvenet" id="children" data-name="dataname" data-id="id">view3</view>
</view>
Page({
myEvenet:function(event){
console.log(event);
}
})
事件对象属性分为3类:BaseEvent、CustomEvent、TouchEvent。
(一)BaseEvent对象属性:
type:事件类型(这里的类型是tap,也就是bind或者catch后边的就是类型)
timeStamp:页面打开到触发所经过的毫秒数
target:触发事件源组件的相关属相集合
- id:事件源组件的id
- dataset:事件源组件上由data-开头的自定义属性组成的集合,可以用来传参数
currentTarget:事件绑定到当前组件的相关属性集合(非冒泡组件没有这个属性)
- id:事件源组件的id
- dataset:当前组件data-开头的自定义属性组成的集合,可以用来传参数
从描述可以看出来target是获取点击源的组件的相关信息,也就是说即使我点的是children这个节点,最终冒泡到parent节点了,但是target里边存的信息都是children里边的信息,而currentTarget存的是当前控件也就是本身的信息
这个输出时我点击children节点冒泡到父节点的父节点触发myEvent事件的事件对象,很明显输出来的信息和我描述的是一致的
其中的dataset数据方式,多个单词用连字符“-”连接,连字符最终会被转换成峰驼式的样式,属性名最好不要用大写(大写最终会被转为小写)
Page({
myEvenet:function(event){
console.log(event.currentTarget.dataset.id);//这里如果换成event.currentTarget.dataset.Id会返回一个undefined
}
})
<view bindtap="myEvenet" id="children" data-my-name="myname" data-Id="id">view3</view>]
//调试结果
{id: "id", myName: "myname"}
在这里可以清楚看到我上边文字描述的内容
(二)CustomEvent为自定义对象事件(集成BaseEvent),只有一个属性:
- detail:额外信息,通常用来传递特殊信息(在不同的控件里表现形式不同参考api)
<form bindsubmit="formSubmit" >
<view>
<view >checkbox</view>
<checkbox-group name="checkbox">
<label><checkbox value="checkbox1"/>checkbox1</label>
<label><checkbox value="checkbox2"/>checkbox2</label>
</checkbox-group>
</view>
<view >
<button formType="submit">Submit</button>
</view>
</form>
Page({
formSubmit:function(event){
console.log(event.detail.value);
}
})
//输出结果
Object {checkbox: Array[0]}
(三)TouchEvent触摸事件对象(集成BaseEvent)
touches:触摸事件,当前停留在屏幕中的触摸点击信息的数组
changedTouches:触摸事件,当前变化的触摸点数组
- Touch对象(canvas组件中是CanvasTouch对象)
identifier:触摸点标示符
pageX,pageY:距离文档左上角距离
clientX,clientY:距离页面可显示区域距离(去除导航条)