微信小程序学习4：小程序语法 - 事件绑定

微信小程序学习4：小程序语法 - 事件绑定

事件绑定最简单的例子是，你设置一个按钮为可触发的，触发条件可以是点击，按压，长按等等。当然，如果你仅仅是设置了触发事件,而没有创建回调函数，是不会产生什么效果的。只有你把设置触发时的回调函数实现，你点击按钮才会有相应动作。

所以一个完整的事件绑定应该包括事件在*.wxml的声明，和在*.js的回调函数

事件绑定承担了对用户的点击，长按等动作做出回应的功能

事件官方文档
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

类型	触发条件
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开

tap 就是点击事件，最常用

事件分类

1. 冒泡事件

a) 定义：冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
b) 我们一般书写的都是冒泡事件，但我们一般只在一个控件绑定事件，不会嵌套，这种可以说是普通事件。
b) 关键词：bind+事件关键词

2. 非冒泡事件

a) 定义：当一个组件上的事件被触发后，该事件不会向父节点传递。

b) 非冒泡事件：表单事件和自定义事件通常是非冒泡事件

c) 关键词 ：catch+事件关键词

bind绑定的事件不一定是冒泡事件，冒泡事件只有在嵌套多层bind事件才体现出来。我们一般可以说，只有一个bind绑定事件的组件情况叫做普通事件。

1 冒泡事件实例

普通事件绑定，没有嵌套的bind事件

事件绑定的写法类似于组件的属性，如：bindtap="handleTap" 这是一个点击事件
页面.wxml

<view bindtap="handleTap">
    Click here!
</view>

如果用户点击这个 view组件 ，则页面的 handleTap 会被调用。
页面.js回调函数

重点：函数名称就是上面事件绑定时等号右边的字符串handleTap

  handleTap: function(event) {
    console.log('点击了')
  },
  // 写法二，event是个回调参数，可以不写
  handleTap() {
    console.log('点击了')
  },

正常冒泡事件
页面.wxml的事件绑定声明，可以看到有两层嵌套。

当点击text控件时。最先触发的事件是bindtap="handleChild"，她在最里面。之后会连带触发bindtap="handleParent"事件。这种情况事件是从里往外触发的就像冒泡一样，所有叫冒泡事件。
当点击view控件时，只会触发bindtap="handleParent"事件。因为它是最外层的，没有可以冒泡的控件了。

  <view bindtap="handleParent" class="goStudy">
    <text bindtap="handleChild">hello world!</text>
  </view>

页面.js创建回调函数

在Page对象中定义函数属性

  handleParent: function(event) {
    console.log('handleParen')
  },
  handleChild: function(event) {
    console.log('handleChild')
  },

点击hello world!会先输出 handleChild，再输出handleParen

2 非冒泡事件实例

  <view bindtap="handleParent" class="goStudy">
    <text catchtap="handleChild">hello world!</text>
  </view>

与 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>

回调函数书写和上面一样。