• 事件处理
  • 事件示例
  • 事件的分类
  • 事件绑定和冒泡
  • 事件的捕获
  • 事件对象
  • 代码示例
    • target
    • currentTarget
    • detail
    • dataset
    • touch
    • changedTouch
  • Tips

事件处理

事件提供了一种可以将用户的行为从视图层反馈到逻辑层进行处理的通讯方式。触发绑定在组件上的事件的时候，就会执行逻辑层中对应的事件处理函数，同时也可以传递数据，例如 id、dataset 等。

事件示例

目标：
在组件中绑定一个事件处理函数 bindtap 。

模板：

• SWAN

 
 
 

  
  
  
<view id="swanTap" data-say="hello" bindtap="tapHandle"> 点击 </view>
 
 
 

定义事件的处理函数：

• JS

 
 
 

  
  
  
Page({
  
  
  
 tapHandle(e) {
  
  
  
 swan.showToast(e.currentTarget.dataset.say);
  
  
  
 }
  
  
  
});
 
 
 

效果：
当用户单击组件时，显示：”hello”。

事件的分类

与浏览器的 DOM 事件类似，智能小程序的视图中事件分为冒泡事件和非冒泡事件。

• 冒泡事件指的是当组件上的事件被触发后，该事件会向父节点传递；
• 非冒泡事件指的是当组件上的事件被触发后，该事件不会向父节点传递；
• 原生组件video、live-player、canvas、cover-view、cover-image等从基础库1.12.0开始支持冒泡。

冒泡事件如下表，不在列表的事件均为非冒泡事件。

事件绑定和冒泡

事件绑定在组件上，与属性的写法相同（以 key、value 的形式）。

• key 以 bind 或 catch 开头，衔接事件类型，例如 bindtap、catchtouchcancel 。也可以在 bind 和 catch 后可以紧跟一个冒号，如bind:tap、catch:touchstart，其功能不变。
• bind 与 catch 的区别是 bind 事件绑定不会阻止冒泡事件向上冒泡，catch 事件绑定可以阻止冒泡事件向上冒泡；
• value 对应的是在 Page 中定义同名的函数，否则在事件触发时执行函数会抛出异常。

代码示例

• SWAN

 
 
 

  
  
  
<view id="wrap" bindtap="handleTap1">
  
  
  
 wrap
  
  
  
 <view id="module" catchtap="handleTap2">
  
  
  
 module
  
  
  
 <view id="text" bindtap="handleTap3">
  
  
  
 text
  
  
  
 </view>
  
  
  
 </view>
  
  
  
</view>
 
 
 

效果：

① 用户单击 text 会先后调用 handleTap3 和 handleTap2。这是因为 tap 事件冒泡到了 module，而 module 阻止了 tap 事件冒泡，不再向父节点传递
② 用户单击 module 会触发 handleTap2
③ 用户单击 wrap 会触发 handleTap1

事件的捕获

捕获阶段是位于冒泡阶段之前，在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。
在捕获阶段监听的方式是采用capture-bind、capture-catch关键字，后者将中断捕获阶段和取消冒泡阶段。

代码示例：capture-bind

• SWAN

 
 
 

  
  
  
<view id="wrap" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  
  
  
 wrap
  
  
  
 <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
  
  
  
 text
  
  
  
 </view>
  
  
  
</view>
 
 
 

效果：

用户单击 text 会先后调用 handleTap2、handleTap4、handleTap3、handleTap1

代码示例：capture-catch

• SWAN

 
 
 

  
  
  
<view id="wrap" bind:touchstart="handleTap1" capture-catch:touchstart="handleTap2">
  
  
  
 wrap
  
  
  
 <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
  
  
  
 text
  
  
  
 </view>
  
  
  
</view>
 
 
 

效果：

用户单击 text 只会调用 handleTap2

事件对象

默认当组件触发事件时，逻辑层绑定事件的处理函数会收到一个默认参数，即事件对象。

下面是事件对象详细属性列表：

代码示例

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

 
 
 

  
  
  
<view id="outer" catchtap="handleTap">
  
  
  
 <view id="inner">点击我</view>
  
  
  
</view>
 
 
 

 
 
 

  
  
  

  
  
  
Page({
  
  
  
 handleTap: function(e) {
  
  
  
 console.log(e);
  
  
  
 // e.type == “tap”
  
  
  
 // e.timeStamp == 1542
  
  
  
 // e.detail == {x: 270, y: 63}
  
  
  
 // e.touches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY: 63}]
  
  
  
 // e.changedTouches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY: 63}]
  
  
  
 // 当点击inner节点时
  
  
  
 // e.target 是inner view组件
  
  
  
 // e.currentTarget 是绑定了handleTap的outer view组件
  
  
  
 }
  
  
  
})
 
 
 

下面是事件对象的属性为属性值集合时的详细信息。这里需要注意的是 target 和 currentTarget 的区别,currentTarget 为当前事件所绑定的组件，而 target 则是触发该事件的源头组件。

target

currentTarget

detail

是自定义事件所携带的数据，具体详见组件定义中各个事件的定义。

dataset

在组件的事件被触发时，也可以传递自定义的数据。
书写方式： 以 data- 开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)，最终的 - 在 dataset 中会将连字符转成驼峰式写法。
如组件上data-car-color属性值的读取方式是: event.currentTarget.dataset.carColor。

touch

changedTouch

数据格式同 touches，指的是有变化的触摸点，如 touchstart（开始），touchmove（变化），touchend，touchcancel（结束）等。

点击事件的 detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。

Tips

请不要在组件中绑定 onClick、onAnimationstart、onDrag 等 HTML 原生事件，这会导致小程序的事件绑定不生效。