快捷導(dǎo)航

微信小程序事件綁定傳參冒泡及捕獲的示例詳解

更新時(shí)間：2022年04月18日 18:07:03 作者：Jeff的技術(shù)棧

這篇文章主要為大家介紹了微信小程序事件綁定傳參冒泡及捕獲的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步早日升職加薪

常見(jiàn)的事件有：

類型	觸發(fā)條件	最低版本
touchstart	手指觸摸動(dòng)作開(kāi)始
touchmove	手指觸摸后移動(dòng)
touchcancel	手指觸摸動(dòng)作被打斷，如來(lái)電提醒，彈窗
touchend	手指觸摸動(dòng)作結(jié)束
tap	手指觸摸后馬上離開(kāi)
longpress	手指觸摸后，超過(guò)350ms再離開(kāi)，如果指定了事件回調(diào)函數(shù)并觸發(fā)了這個(gè)事件，tap事件將不被觸發(fā)	1.5.0
longtap	手指觸摸后，超過(guò)350ms再離開(kāi)（推薦使用longpress事件代替）
transitionend	會(huì)在 WXSS transition 或 wx.createAnimation 動(dòng)畫(huà)結(jié)束后觸發(fā)
animationstart	會(huì)在一個(gè) WXSS animation 動(dòng)畫(huà)開(kāi)始時(shí)觸發(fā)
animationiteration	會(huì)在一個(gè) WXSS animation 一次迭代結(jié)束時(shí)觸發(fā)
animationend	會(huì)在一個(gè) WXSS animation 動(dòng)畫(huà)完成時(shí)觸發(fā)
touchforcechange	在支持 3D Touch 的 iPhone 設(shè)備，重按時(shí)會(huì)觸發(fā)

有兩個(gè)注意點(diǎn)：

Touchcancle: 在某些特定場(chǎng)景下才會(huì)觸發(fā)（比如來(lái)電打斷等）

tap事件和longpress事件通常只會(huì)觸發(fā)其中一個(gè)

currentTarget和target的區(qū)別

事件傳遞參數(shù)

當(dāng)視圖層發(fā)生事件時(shí)，某些情況需要事件攜帶一些參數(shù)到執(zhí)行的函數(shù)中, 這個(gè)時(shí)候就可以通過(guò)

data-屬性來(lái)完成：

1 格式：data-屬性的名稱

2 獲?。篹.currentTarget.dataset.屬性的名稱

touches和changedTouches的區(qū)別

事件的綁定兩種方法

第一種：bind：事件名推薦方式，冒號(hào)隔開(kāi)

wxml文件：

<button bind:tap="click1" data-name="{{name}}" data-age="18" id="bt">我是按鈕</button>

js文件：

Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {
    name:"jeff"
  },
  //e為事件對(duì)象，事件所有產(chǎn)生的數(shù)據(jù)都在e中
  click1:function(e){
    console.log("你點(diǎn)擊了事件1"，e)
  },
  )}

第二種：bind事件名不隔開(kāi)

wxml文件:

<view bindtap="click2">我是事件2</view>

js文件：

Page({
  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  //e為事件對(duì)象，事件所有產(chǎn)生的數(shù)據(jù)都在e中
  click2:function(e){
  console.log("你點(diǎn)擊了事件2"，e)
  },
  )}

事件傳參

關(guān)鍵字：setDate

WXML文件：

<button bind:tap='click2'>你當(dāng)前點(diǎn)擊了{(lán){num}}次</button>

js文件

// pages/test/test.js
Page({
  data: {
    num:0,
  },
  click2: function (e) {
    this.setData({
      num:this.data.num+1
    })
    console.log('你點(diǎn)擊了按鈕2')
  },
  
})

事件的冒泡與事件的捕獲

capture-bind:tap="click1"		 # 事件捕獲，執(zhí)行順序：由外->內(nèi)
bind:tap="click2"				# 事件冒泡，執(zhí)行順序：由內(nèi)->外
catch: 阻止事件捕獲
capture-catch:tap="click3"   # 順序執(zhí)行到click3，不包括click3.后面不再繼續(xù)執(zhí)行，阻止了