小程序事件綁定、傳參、捕獲與冒泡

一.常見的事件

二.事件綁定與傳參

頁面中

不需要傳參的事件

<!--寫法一 bind事件名='函數名' -->
<view bindtap="click">我是事件</view>
<!--寫法一 bind:事件名='函數名' -->
<view bind:tap="click">我是事件</view>

需要傳參的事件

<!-- 點擊傳參   data-傳過去的key='變量值' -->
<!-- 點擊傳變量 data-傳過去的key='{{變量名}}' -->
<button bind:tap="click2" data-name="{{name}}" data-age="18" id="bt">我是按鈕</button>

.js文件

Page({

  /*頁面的初始數據*/
  data: {
    name:"owen"
  },
  //e為事件對象，事件所有產生的數據都在e中
  click:function(e){
    console.log("你點我了") 
  },
  click2:function(e){
    console.log("你點我了"，e) 
  },
  )}

總結:

1 響應函數直接寫在page對象中就可以了，不需要和vue一樣寫在methods里面
2 <view bind:事件名稱 = "響應函數的函數名" data-參數名 = "值">
3 獲取傳過來的參數，在事件對象中。用e.currentTarget.dataset.屬性的名稱

三、事件捕獲與冒泡

wxml頁面

<!-- capture-bind:tap 事件的捕獲，從外面到里面-->
<!-- bind:tap就是事件的冒泡，從里面到外面傳遞 -->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面

  <view class="midd" capture-bind:tap="click5" bind:tap="click8" data-a="i">
    <view class="inner"  capture-bind:tap="click6" bind:tap="click9">
      里面
    </view>

    中間
  </view>

</view>

<!-- 如何阻止事件捕獲  將 capture-bind:tap改成  capture-catch:tap-->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面

  <view class="midd" capture-catch:tap="click5" bind:tap="click8" data-a="i">
    <view class="inner"  capture-bind:tap="click6" bind:tap="click9">
      里面
    </view>

    中間
  </view>

</view>


<!-- 如何阻止事件冒泡  將bind：tap 改成 catch:tap-->
<view class="outter" capture-bind:tap="click4" bind:tap="click7" data-a="o">外面

  <view class="midd" capture-bind:tap="click5" bind:tap="click8" data-a="i">
    <view class="inner"  capture-bind:tap="click6" catch:tap="click9">
      里面
    </view>

    中間
  </view>

</view>

js文件

// pages/test1/test1.js
Page({

  data: {
    name:"owen"

  click4:function(e){
    console.log("捕獲外")
  },
  click5:function(e){
    console.log("捕獲中")
  },
  click6:function(e){
    console.log("捕獲里")
  },
  click7:function(e){
    console.log("冒泡外")
  },
  click8:function(e){
    console.log("冒泡中")
  },
  click9:function(e){
    console.log("冒泡里")
  }
})

wxss文件

/* pages/test1/test1.wxss */

.outter{
  width: 600rpx;
  height: 600rpx;
  background-color: red;
}
.midd{
  width: 400rpx;
  height: 400rpx;
  background-color: blue;
}
.inner{
  width: 200rpx;
  height: 200rpx;
  background-color: yellow;
}