《六》微信小程序中的事件

事件是视图层到逻辑层的通讯方式，可以将用户的行为反馈到逻辑层进行处理。事件绑定在组件上，当事件触发时 ，就会执行逻辑层中对应的事件处理函数。

使用方式：

1. 在组件上通过 bind/catch 绑定一个事件。

   // 当用户点击该组件的时候会触发对应 Page 中的事件处理函数
   <button bindtap="handleTap">按钮</button >
   

2. 在 Page 构造器中编写对应的事件处理函数。

   // 当触发事件时，事件处理函数会接收到一个事件对象 event。
   Page({
     handleTap: function(e) {
       console.log(e)
     }
   })
   

事件对象 Event：

当某个事件触发时，会产生一个事件对象，并传入到事件处理函数中。

1. target：触发事件的元素对象。
2. currentTarget：绑定事件的元素对象。
3. touches：当前屏幕上所有触摸点的列表。
4. changedTouches：有变化的触摸点的列表。例如：监听 touchend 事件，会发现 touches 中没有触摸点信息，但是 changedTouches 中有触摸点信息。
5. detail：自定义事件携带的数据。

参数传递：

dataset：

1. 在组件节点上可以通过 data- 自定义属性附加自定义数据。

   <view data-id="1"  bindtap="handleTap">我是事件传递自定义参数</view>
   

2. 在事件处理函数中可以通过 dataset 获取自定义数据：连字符写法会转换成驼峰写法，大写字符会自动转成小写字符。

   Page({
     handleTap(e){
       const id = e.currentTarget.dataset.id;
     }
   })
   

mark：

1. 在组件节点上可以通过 mark 属性附加自定义数据。

   <view mark:id="1"  bindtap="handleTap">
   	<view mark:name="Lee">我是事件传递自定义参数</view>
   </view>
   

2. 在事件处理函数中可以通过 mark 获取自定义数据。

   Page({
     handleTap(e){
       const id = e.mark.id;
       const name= e.mark.name;
     }
   })
   

dataset 和 mark 的区别：

1. mark 会包含从触发事件的节点到根节点上所有的 mark: 属性值；而 dataset 仅包含一个节点的 data- 属性值。

   如果存在同名的 mark ，父节点的 mark 会被子节点覆盖。
   在自定义组件中接收事件时， mark 不包含自定义组件外的节点的 mark 。

2. 节点的 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 >