微信小程序-事件处理

2017-06-21

先看一下微信小程序对事件的解释：

文字叙述一下

什么是事件

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。

就是那些点击、鼠标移进移出之类的动作啦。小程序绑定事件的方法是在 wxml 文件对应的组件中使用 bindtap加上事件名字就可以了。例如：

1	<view bindtap="test"></view>

然后当点击这个组件的时候小程序就会在该页面对应的脚本文件的 Page 中找到相应的事件处理函数，下面举例写这个 test 事件:

Page({
   ....
   test: function(event){
      console.log('Click！');
   }
})

先点击一下组件，然后打开控制台看看是否成功。毫无疑问是可以的。接下来再看看获得的这个事件里面到底有什么信息

嗯，首先是 type事件类型是 tap ，这个 tap 事件就是手指触摸后马上离开的动作，也就是点击啦。timeStamp为发生事件的时间戳，detail表示事件的某种信息，根据不同的事件会返回不同的信息，这里返回的是点击时的坐标。currentTarget和target这两个属性比较容易搞糊涂，currentTarget在事件流的捕获、目标和冒泡阶段，而target只是在事件流的目标阶段，当事件流是在目标阶段时，这两个的值是一样的，而事件流在捕获和冒泡阶段的话，两个属性的值不一样，下面会具体分析。最后是changedTouches和touches的比较，touches属性当每个事件被触发时，就会获取此时每个触点的信息，并保存在列表中，是只读属性。changedTouches跟差不多也是可以记录触点的信息，但它是根据事件的变法来获取触点的信息，举个栗子就是，当一只手指触碰屏幕时，changedTouches和touches都会同时记录这个触点的信息，信息一样；而当手指离开屏幕时，触点消失，touches中的记录就会消失，而由于这个过程是由接触事件向没有接触事件的变化，所以changedTouches仍然记录着触点移开前的信息，这就是两者之间的区别了。

再举例分析一下currentTarget和target的不同

我先把事件 test 绑定在 Image 组件上，即：

<view id="view" class="userinfo">
    <image id="image" bindtap="test" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>

然后点击头像，查看currentTarget和target的信息：

一样，因为目标对象都是 image 组件。再把 test 事件绑定到 image 的父组件 view 上：

<view id="view" bindtap="test" class="userinfo">
    <image id="image" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>

然后点击头像，查看currentTarget和target的信息：

可看到信息不一样了，不难发现这次 target 保存的信息是点击的 image 组件的信息，而 currentTarget 保存的是绑定 test 事件的 view 组件的信息。到这里currentTarget和target的区别已经很明显了。

分析完 event 对象，继续分析 currentTarget 对象，因为这个很常用，经常用它来获取触发事件的组件信息，先把它打印出来：

1
2
3

test: function(event){
      console.log(event.currentTarget)
  }

点击头像，获取信息：

Object {id: "image", offsetLeft: 156, offsetTop: 110, dataset: Object}
dataset:Object
id:"image"
offsetLeft:156
offsetTop:110
__proto__:Object

信息主要有dataset对象，目标组件id的值，还有相对页面的偏移量offsetLeft和offsetTop。

看看 dataset 里面装的是什么

1
2
3

test: function(event){
      console.log(event.currentTarget.dataset)
  }

嗯，什么都没有。查阅文档得知，dataset 是组件上由data-开头的自定义属性组成的集合，所以我们在 view 组件上增加几个自定义属性：

<view bindtap="test" data-num="1" data-hi="hello" id="view" class="userinfo">
    <image id="image" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>

有了，然后获取数据的时候直接按下面方法使用就行了：

1 2	event.currentTarget.dataset.hi event.currentTarget.dataset.num

绑定事件除了用 bind之外还可以用 catch，区别是 bind不会阻止冒泡事件向上冒泡，而 catch会。举例说明：

test1: function(event){
      console.log("test1")
  },
  test2: function (event) {
    console.log("test2")
  },
  test3: function (event) {
    console.log("test3")
  }

我定义了三个事件，然后绑定在三个嵌套的组件里

<view bindtap="test3" class="container">
  <view bindtap="test2" data-num="1" data-hi="hello" id="view" class="userinfo">
    <view bindtap="test1" class="classname">
    <image id="image" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

点击头像，可以发现：

事件由里向外顺序触发，向冒泡一样。如果在第二层的 view 那里使用 catchtap，即：

<view bindtap="test3" class="container">
  <view catchtap="test2" data-num="1" data-hi="hello" id="view" class="userinfo">
    <view bindtap="test1" class="classname">
    <image id="image" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

点击头像：

冒泡在第二层那里被中断了。catch就是这么玩。

完。