小程序开发之（2）-Js交互

小程序开发之（2）-Js交互

1. 事件是对用户的操作行为的相应
2. bind VS catch (冒泡区别：bind不能阻止冒泡）
3. 事件对象

通过button按钮触发"点击加1"事件

base.wxml源码

<button size="mini" bindtap="onTapHandler">点我加1</button>
<view>{{count}}</view>

base.js

onTapHandler:function(){
   // this.data.cont++;
   this.setData({count:this.data.count+1})
  },

通过点击box和child触发boxhandler()和childhandler()事件

两种方式：bind VS catch(ex. bindtap catchtap)
base.wxml

<view class='box' catchtap="onTapBoxHandler">
<view class='child'catchtap="onTapChildHandler"></view>
</view>

base.js

onTapBoxHandler:function(){
  console.log('box click');
  },
  onTapChildHandler:function () {
    console.log('child click');
  },

注意：
bind:无法阻止冒泡发生，即点击触发子事件时，父亲事件也必须相应被触发，捆绑性。反而，catch可以解决这个问题。

事件对象

base.wxml

<view class='box' catchtap="onTapBoxHandler" data-id="12344">

base.js

onTapBoxHandler:function(event){
  console.log('box click');
  console.log(event);
  },

通过对data-id设定“1234”
console显示：

target:
dataset:
id: "12344"

附base.wxss

.box{
  width:200rpx;
  height:200rpx;
  background:#ccc

}
.child{
  width:100rpx;
  height:100rpx;
  background:#fcc

}
```