微信小程序入门学习之事件 事件对象 冒泡非冒泡事件（1）

这关于事件的学习，可以自己复制到微信开发者工具上自己运行试试。

首先这里有两个文件.js 和.wxml 文件

首先给出.js文件下代码

// pages/news/news.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    msg: "我是一个msg"
  },

  //这是一个生命周期函数  页面加载就会触发
  onLoad: function (options) {
    console.log('生命周期函数  页面加载就会触发');
    //在生命周期函数里面调用方法
    this.run();
    this.requestData('1234567');
  },

  run() {  /*自定义方法*/

    console.log('run自定义方法')
  }
  ,
  getMsg() {
    //获取data里面定义的数据
    console.log(this.data.msg);
  },
  setMsg() {
    //改变data里面msg的值
    this.setData({
      msg: '我是改变后的msg'
    })
  },

  //事件对象
  doEventFn(e) {
    console.log(e);
    //可以获取自定义属性的值
    console.log(e.currentTarget.dataset.aid)
    //当然既然知道自定义属性的值，可以根据这个属性做一些其他的操作了，暂时我还不会

  },

  //小程序里面执行方法传值
  requestData(aid) {
    console.log(aid);
  },

  //在view视图层执行方法传值

  requestViewData(event) {
    console.log(event.currentTarget.dataset);
  }

  , handleTap1() {
    console.log('handleTap1')
  }
  , handleTap2() {
    console.log('handleTap2')
  }
  , handleTap3() {
    console.log('handleTap3')
  }

})

然后是wxml 文件下代码

<view>
  {{msg}}
</view>

<!-- 按钮1 按钮尺寸 按钮属性相对id -->
<button size='mini' bindtap='run'>执行run方法 注意触发方法不需要写()</button>

<view class='br'></view><!-- 换行的作用 -->
<button size='mini' bindtap='getMsg'>获取msg的值</button>

<view class='br'></view>
<button size='mini' bindtap='setMsg'>改变msg的值</button>

<view class='br'></view>
<button size='mini' data-aid='234' bindtap='doEventFn'>事件对象</button>

<view class='br'></view>
<button size='mini' data-aid='xxdefsafwe' data-cid='123' bindtap='requestViewData'>执行方法传值</button>

<!-- 这个是讲冒泡与非冒泡事件，通过点击outer view ，middle view 和innerview 你会发现有不同之处 -->
<!-- 点击inner view 事件会往上递归，先执行handletap3 然后 handletap2 如果handletap2为catchtap则阻止冒泡-->
<view class='br'></view>
<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

运行案例