小程序开发之(2)-Js交互
- 事件是对用户的操作行为的相应
- bind VS catch (冒泡区别:bind不能阻止冒泡)
- 事件对象
通过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
}
```