一. 小程序的事件监听
- 什么时候会产生事件呢?
- 小程序需要经常和用户进行某种交互,比如点击界面上的某个按钮或者区域,比如滑动了某个区域
- 事件是视图层到逻辑层的通讯方式
- 事件可以将用户的行为反馈到逻辑层进行处理
- 事件可以绑定在组件上,当触发事件时,就会执行逻辑层中对应的事件处理函数
- 事件对象可以携带额外信息,如
id,dataset,touches
- 事件时如何处理呢?
- 事件是通过
bind/catch这个属性绑定在组件上的(和普通的属性写法很相似, 以key=“value”形式) key以bind或catch开头, 从1.5.0版本开始, 可以在bind和catch后加上一个:- 同时在当前页面的
Page构造器中定义对应的事件处理函数,如果没有对应的函数,触发事件时会报错 - 比如当用户点击该
button区域时,达到触发条件生成事件tap,该事件处理函数会被执行,同时还会收到一个事件对象event
- 事件是通过
二. 常见事件类型划分
某些组件会有自己特性的事件类型,可以在使用组件时具体查看对应的文档
- 比如
input有bindinput/bindblur/bindfocus等 - 比如
scroll-view有bindscrolltowpper/bindscrolltolower等
- 比如
这里我们讨论几个组件都有的,并且也比较常见的事件类型:

三. 事件对象属性分析
1.事件对象 event
当某个事件触发时,会产生一个事件对象,并且这个对象被传入到回调函数中,事件对象有哪些常见的属性呢?

2. currentTarget 和 target 的区别
target:触发事件的源组件currentTarget:事件绑定的当前组件
3. touches 和 changedTouches 的区别
touches:当前停留在屏幕上的触摸点- 是一个数组,每个元素为一个
Touch对象(canvas触摸事件中携带的touches是CanvasTouch数组)。
- 是一个数组,每个元素为一个
changedTouches:有变化的触摸点- 如从无变有(
touchstart),位置变化(touchmove),从有变无(touchend、touchcancel) - 数据格式同
touches
- 如从无变有(
在
touchend中不同多手指触摸时不同

四. 事件参数传递方法
当视图层发生事件时,某些情况需要事件携带一些参数到执行的函数中,这个时候就可以通过
data-属性来完成:- 格式:
data-xxx属性的名称 - 获取:
e.currentTarget.dataset.xxx属性的名称

- 格式:
五. 事件传递案例练习

六. 冒泡和捕获的区别
当界面产生一个事件时,事件分为了捕获阶段和冒泡阶段
将
bind替换为catch:阻止事件进一步传递(阻止事件向上冒泡)也可以用小程序内部提供的
mark属性- 在基础库版本
2.7.1以上,可以使用mark来识别具体触发事件的target节点 mark还可以用于承载一些自定义数据(类似于dataset)

- 在基础库版本
