微信开发者工具——小程序事件

• 事件的作用：有了事件，视图层才能和逻辑层进行交互
• 事件的特点：局部模块事件需要写在js文件的page内部，需要使用逗号隔开不同的事件，小程序可以阻止事件冒泡并实现互斥事件

 

 实验如下

文件目录

创建过程

右键pages、新建文件夹、取名字（events）

右键events、新建Page、取名字（events）

这样就会自动生成以下四个文件

app.json

events.wxss （整体样式）

/* pages/events/events.wxss */

.father{
  background-color: aqua;
  height: 100px;
  width: 100px;
  text-align: center;
  margin-left: 50px;
}
.child{
  background-color: green;
  height: 50px;
  width: 50px;
  text-align: center;
  margin-left: 25px;
}

 

 

 events.ts/js

// pages/events/events.ts
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  showOne:function(){
    console.log("点击了父组件");
  },
  showTwo:function(){
    console.log("点击了子组件");
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad() {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

 

 以下操作只需修改events.wxml中的事件绑定关键字

• 事件冒泡（触发子组件也会触发父组件）

events.wxml

<!--pages/events/events.wxml-->
<text>pages/events/events.wxml</text>
<view class="father" bind:tap="showOne">father
  <view class="child" bind:tap="showTwo">child
  </view>
</view>

点击模拟器中的child，console输出如下日志（父组件也被触发）

• 阻止事件冒泡

只需将子组件的

bind:tap

改为

catch:tap

events.wxml整体代码

<!--pages/events/events.wxml-->
<text>pages/events/events.wxml</text>
<view class="father" bind:tap="showOne">father
  <view class="child" catch:tap="showTwo">child
  </view>
</view>

 

点击模拟器中的child，console输出如下日志（父组件没有被触发）

 

• 互斥事件

在子组件中再添加一个子组件，父组件的绑定关键字也改变 

代码如下

events.wxml

<!--pages/events/events.wxml-->
<text>pages/events/events.wxml</text>
<view class="father" mut-bind:tap="showOne">father
  <view class="child" catch:tap="showTwo">child
  <view class="grandson" mut-bind:tap="showThree">
  </view>
  </view>
</view>

 

events.wxss中添加代码

.grandson{
  background-color:hotpink;
  height: 25px;
  width: 25px;
  text-align: center;
  margin-left: 10px;
}

在events.ts/js中添加

  showThree:function(){
    console.log("点击了子组件的子组件");
  },

 

 

点击子组件的子组件（grandson）（最小的方块），console输出如下日志

可以发现：如果我们绑定了多个mut-bind那么只有一个mut-bind事件被执行，mut-bind不会影响catch和bind的点击事件