慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第4章第二个页面新闻阅读页面-小程序的事件机制——catch与bind

小程序的事件机制——catch与bind

1.进入目录 pages/welcome，修改文件 welcome.js

Page({
  onTap:function() {
    // wx.navigateTo({
    //   url:'../posts/posts'
    // });

    wx.redirectTo({
      url: '../posts/posts',
    })
    //console.log('onTap');
  },
  onUnload:function() {
    console.log('welcome page is unload');
  },
  onHide:function() {
    console.log('welcome page is onhide');
  }
})

2.查看冒泡和非冒泡的情况

3.进入目录 pages/welcome，修改文件 welcome.wxml

<!-- wxml用来编写页面骨架的文件 -->
<!-- <view>等同于<div>作用就是容器和分隔文档 -->
<view class="container">
    <image class="user-avator" src="/images/avatar.png"></image>
    <text class="user-name">Hello，七月</text>
    <!--按钮最好不要用小程序提供的<button></button>，用另外方式替代，这是经验-->
    <view class="meto-container" bind:tap="onContainerTap">
        <text class="meto" bind:tap="onSubTap">开启小程序之旅</text>
    </view>      
</view>

4.进入目录 pages/welcome，修改文件 welcome.js

Page({
  onTap:function() {
    // wx.navigateTo({
    //   url:'../posts/posts'
    // });

    wx.redirectTo({
     url: '../posts/posts',
    })
    //console.log('onTap');
  },

  onContainerTap:function() {
    console.log('Container Tap');
  },

  onSubTap:function() {
    console.log('Sub Tap');
  },

  onUnload:function() {
    //console.log('welcome page is unload');
  },
  onHide:function() {
    //console.log('welcome page is onhide');
  }
})

5.测试效果，只点击"开启小程序之旅"的外边框，不点击文字，只提示打印出 Container Tap

6.测试效果，点击"开启小程序之旅" 文字，提示先打印出 Sub Tap 后打印出 Container Tap

7.这是冒泡，点击子元素，父元素也会监听到，从而产生响应，如果想要点击子元素阻止父元素冒泡，可使用 catch:tap

8.进入目录 pages/welcome，修改文件 welcome.wxml

<!-- wxml用来编写页面骨架的文件 -->
<!-- <view>等同于<div>作用就是容器和分隔文档 -->
<view class="container">
    <image class="user-avator" src="/images/avatar.png"></image>
    <text class="user-name">Hello，七月</text>
    <!--按钮最好不要用小程序提供的<button></button>，用另外方式替代，这是经验-->
    <view class="meto-container" bind:tap="onContainerTap">
        <text class="meto" catch:tap="onSubTap">开启小程序之旅</text>
    </view>      
</view>

9.测试查看，点击"开启小程序之旅" 文字，只打印出 Sub Tap 　

10.进入目录 pages/welcome，修改文件 welcome.wxml，恢复原来的代码

<!-- wxml用来编写页面骨架的文件 -->
<!-- <view>等同于<div>作用就是容器和分隔文档 -->
<view class="container">
    <image class="user-avator" src="/images/avatar.png"></image>
    <text class="user-name">Hello，七月</text>
    <!--按钮最好不要用小程序提供的<button></button>，用另外方式替代，这是经验-->
    <view class="meto-container" bind:tap="onTap">
        <text class="meto">开启小程序之旅</text>
    </view>      
</view>

11.进入目录 pages/welcome，修改文件 welcome.js，恢复原来的代码　

Page({
  onTap:function() {
    // wx.navigateTo({
    //   url:'../posts/posts'
    // });

    wx.redirectTo({
     url: '../posts/posts',
    })
    //console.log('onTap');
  },
  
  onUnload:function() {
    //console.log('welcome page is unload');
  },
  onHide:function() {
    //console.log('welcome page is onhide');
  }
})