小程序开发-事件

事件

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

事件的分类

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

关于冒泡事件与非冒泡事件的分类见事件

事件的绑定和冒泡

事件的绑定同组件属性 ，以key，value的形式出现

• key以bind或catch开头，然后跟上事件的类型（见上文）如：bindtap，catchtouchstart，也可以使用bind与catch后紧跟一个冒号，如：bind:tap，catch:touchstart
• value是一个字符串，需要在对应的Page中定义同名函数；

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

事件的使用方式

• 在组件中绑定一个事件处理函数，在相应的Page中写上相应的事件处理函数，参数是event
  <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click Me! </view>

• 使用WXS函数响应事件，在组件中绑定和注册事件处理的WXS函数，在对应的.wxs文件中定义函数

<wxs module="wxs" src="./test.wxs"></wxs>
<view id="tapTest" data-hi="WeChat" binftap="{{wxs.tapName}}"> Click me!</view>

事件的捕获阶段

捕获阶段位于冒泡阶段之前，且在捕获阶段中，事件到达节点的顺序与冒泡阶段恰好相反。
capture-bind进行捕获阶段监听事件，capture-catch中断捕获和取消冒泡阶段