1、事件概述
由于小程序中没有DOM节点概念,所以事件只能通过WXML绑定,不能通过逻辑层动态绑定。事件可以看作是视图层到逻辑层的通讯方式;抑或是将用户的行为反馈到逻辑层进行处理;或是将事件绑定在组件上,当触发事件时,就会执行逻辑层中对应的事件处理函数。
2. 事件分类
2.1 冒泡事件
当一个组建上的事件被触发后,该事件向父节点传递。即冒泡事件冒泡的特点是触发从具体的元素逐步向外层扩散。
2.1.1 WXML冒泡事件
1)touchstart:手指触摸动作开始
2)touchmove:手指触摸后移动
3)touchcancel:手指触摸动作被打断
4)touchend:手指触摸动作结束
5)tap:手指触摸后马上离开
6)longtap:手指触摸后,超过350ms再离开
2.2 非冒泡事件
当一个组件上的事件被出发后,该事件不会向父节点传递。
除了上述列出来的6类冒泡事件,若无特殊声明都是非冒泡事件。
3. 事件绑定
事件绑定的写法和组件的属性一样,以key、value形式组织。其中,.key:以bind或catch开头,然后跟上事件类型,字母均小写。如bindtap等。.value:事件函数名,对应Page中定义的同名函数。绑定时bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定会阻止冒泡事件向上冒泡。
事件对象可以携带额外信息,如id、dataset、touches
<view bindtap='tap1'>
触发1{{tap1}}
<view bindtap='tap2'>
触发2{{tap2}}
<view bindtap='tap3'>
触发3{{tap3}}
</view>
</view>
</view>
/**
* 自定义函数 当点击tap3时,会向上逐级触发
*/
tap1:function(){
this.setData({
tap1:"111"
});
},
tap2: function () {
this.setData({
tap2: "111"
});
},
tap3: function () {
this.setData({
tap3: "111"
});
}
4. 事件对象
事件对象属性基本可分为三类:BaseEvent(基础事件对象属性)、CustomEvent(自定义事件对象属性)、TouchEvent(触摸事件对象属性)
一般而言,当组件触发事件时,逻辑层绑定该事件的事件处理函数会收到一个事件对象。现在获取BaseEvent该事件对象:
以下是对上述属性的注解:
1)type:事件类型,本例中事件为手指触摸后马上来开
2)timeStamp:事件生成时的时间戳,页面打开到触发所经过的毫秒数
3)target:触发事件源组件(即冒泡开始的组件)的相关属性集合
4)dataset:当前组件上由data-开头的自定义属性组成的集合
5)CustomEvent为自定义事件对象,只有一个属性:detail(额外信息,通常传递组件特殊信息)
6)touches:触摸事件对象属性,当前停留在屏幕中的触摸点信息的数组