小程序-事件

(文章不啰嗦,为的是最高效率解决问题)
基于小程序官方文档进行解析

什么是事件?,事件的使用方式?
看官方文档https://developers.weixin.qq....

本文重点来了
事件分类
事件分为冒泡事件和非冒泡事件：

1. 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。 
2. 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
 

上面是定义,小程序的冒泡事件在文档里面也写的很清楚了,重点是这句

bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle
 view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，
点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

使用环境例子:模拟个情况就是在小程序里如果我想要做一个非满屏的浮层,点击空白处关闭,利用事件冒泡和非冒泡就很好的解决了问题.

事件另一个就是捕获,官方版本1.5.0后支持

在下面的代码中，点击 inner view 会先后调用handleTap2、handleTap4、handleTap3、handleTap1。

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

捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反
采用的是capture-bind、capture-catch关键字,而且捕获是先于冒泡,也就是说你再点击子元素时,冒泡是子元素到父元素的顺序,而捕获是父元素到子元素的顺序,而bind和capture-bind不会阻止冒泡捕获,cacth和capture-catch会阻止,(事件终结者有木有).