事件是视图层到逻辑层的通讯方式,可以将用户的行为反馈到逻辑层进行处理。事件绑定在组件上,当事件触发时 ,就会执行逻辑层中对应的事件处理函数。
使用方式:
- 在组件上通过 bind/catch 绑定一个事件。
// 当用户点击该组件的时候会触发对应 Page 中的事件处理函数 <button bindtap="handleTap">按钮</button >
- 在 Page 构造器中编写对应的事件处理函数。
// 当触发事件时,事件处理函数会接收到一个事件对象 event。 Page({ handleTap: function(e) { console.log(e) } })
事件对象 Event:
当某个事件触发时,会产生一个事件对象,并传入到事件处理函数中。
- target:触发事件的元素对象。
- currentTarget:绑定事件的元素对象。
- touches:当前屏幕上所有触摸点的列表。
- changedTouches:有变化的触摸点的列表。例如:监听 touchend 事件,会发现 touches 中没有触摸点信息,但是 changedTouches 中有触摸点信息。
- detail:自定义事件携带的数据。
参数传递:
dataset:
- 在组件节点上可以通过
data-
自定义属性附加自定义数据。<view data-id="1" bindtap="handleTap">我是事件传递自定义参数</view>
- 在事件处理函数中可以通过 dataset 获取自定义数据:连字符写法会转换成驼峰写法,大写字符会自动转成小写字符。
Page({ handleTap(e){ const id = e.currentTarget.dataset.id; } })
mark:
- 在组件节点上可以通过 mark 属性附加自定义数据。
<view mark:id="1" bindtap="handleTap"> <view mark:name="Lee">我是事件传递自定义参数</view> </view>
- 在事件处理函数中可以通过 mark 获取自定义数据。
Page({ handleTap(e){ const id = e.mark.id; const name= e.mark.name; } })
dataset 和 mark 的区别:
-
mark 会包含从触发事件的节点到根节点上所有的
mark:
属性值;而 dataset 仅包含一个节点的data-
属性值。如果存在同名的 mark ,父节点的 mark 会被子节点覆盖。
在自定义组件中接收事件时, mark 不包含自定义组件外的节点的 mark 。 -
节点的 dataset 会做连字符和大小写转换,节点的 mark 不会做连字符和大小写转换。
事件分类:
事件分为冒泡事件和非冒泡事件。
冒泡事件有:手指触摸事件(touchstart、touchmove、touchcancel、touchend),手指点击事件(tap、longpress)、动画事件(animationstart、animationiteration、animationend、transitionend)。
组件其他事件如无特殊声明都是非冒泡事件(例如:form 的 submit 事件,input 的 input 事件,scroll-view
的 scroll 事件等)。
事件捕获和事件冒泡:
可以使用 capture-bind
在捕获阶段监听事件;使用 bind 在冒泡阶段监听事件。
阻止事件捕获和事件冒泡:
使用 bind 绑定事件不会阻止事件的进一步传递(向下捕获和向上冒泡);使用 catch 绑定事件会阻止事件的进一步传递(向下捕获和向上冒泡)。
<button catchtap="handleTap">按钮</button >