欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年04月18日 18:07:03   作者:Jeff的技術(shù)棧  
這篇文章主要為大家介紹了微信小程序事件綁定傳參冒泡及捕獲的示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步早日升職加薪

常見的事件有:

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

有兩個注意點:

Touchcancle: 在某些特定場景下才會觸發(fā)(比如來電打斷等) 

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

currentTarget和target的區(qū)別

事件傳遞參數(shù)

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

data-屬性來完成:

1 格式:data-屬性的名稱

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

touches和changedTouches的區(qū)別

事件的綁定兩種方法

第一種:bind:事件名 推薦方式,冒號隔開

wxml文件:

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

js文件:

Page({

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

第二種:bind事件名 不隔開

wxml文件:

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

js文件:

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

事件傳參

關(guān)鍵字:setDate

WXML文件:

<button bind:tap='click2'>你當(dāng)前點擊了{(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('你點擊了按鈕2')
  },
  
})

事件的冒泡與事件的捕獲

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

catch阻止捕獲

小結(jié)

1 響應(yīng)函數(shù)直接寫在page對象中就可以了,不需要和vue一樣寫在methods里面

2 <view bind:事件名稱 = "響應(yīng)函數(shù)的函數(shù)名" data-參數(shù)名 = "值">

3 獲取點擊事件傳過來的值,在事件對象中。例如:e.currentTarget.dataset中

以上就是微信小程序事件綁定傳參冒泡及捕獲的示例詳解的詳細(xì)內(nèi)容,更多關(guān)于微信小程序事件綁定傳參冒泡及捕獲的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 對layer彈出框中icon數(shù)字參數(shù)的說明介紹

    對layer彈出框中icon數(shù)字參數(shù)的說明介紹

    今天小編就為大家分享一篇對layer彈出框中icon數(shù)字參數(shù)的說明介紹,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2019-09-09
  • 利用uni-app開發(fā)App的超簡易教程

    利用uni-app開發(fā)App的超簡易教程

    uni-app是一個使用Vue.js開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS、Android、Web(響應(yīng)式)、以及各種小程序,下面這篇文章主要給大家介紹了關(guān)于如何利用uni-app開發(fā)App的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • javascript下數(shù)值型比較難點說明

    javascript下數(shù)值型比較難點說明

    下面兩個小問題是樓豬在實際項目開發(fā)中遇到的,貼上來和大家討論下。
    2010-06-06
  • Ionic默認(rèn)的Tabs模板使用實例

    Ionic默認(rèn)的Tabs模板使用實例

    這篇文章主要為大家詳細(xì)介紹了Ionic默認(rèn)的Tabs模板使用實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-08-08
  • js 綁定鍵盤鼠標(biāo)事件示例代碼

    js 綁定鍵盤鼠標(biāo)事件示例代碼

    用jq提交時想同時按回車鍵可以提交,此時就不要用form,需要的朋友可以參考下
    2014-02-02
  • 開源一個微信小程序儀表盤組件過程解析

    開源一個微信小程序儀表盤組件過程解析

    這篇文章主要介紹了開源一個微信小程序儀表盤組件過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-07-07
  • JavaScript中的this例題實戰(zhàn)總結(jié)詳析

    JavaScript中的this例題實戰(zhàn)總結(jié)詳析

    使用JavaScript開發(fā)的時候,很多人多多少少都會被this的指向問題搞蒙圈,下面這篇文章主要給大家介紹了關(guān)于JavaScript中this例題實戰(zhàn)的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-06-06
  • ES6 Generator函數(shù)的應(yīng)用實例分析

    ES6 Generator函數(shù)的應(yīng)用實例分析

    這篇文章主要介紹了ES6 Generator函數(shù)的應(yīng)用,結(jié)合實例形式分析了ES6 Generator函數(shù)異步操作與異常捕獲相關(guān)使用技巧,需要的朋友可以參考下
    2019-06-06
  • Javascript淺析執(zhí)行機(jī)制的詳情

    Javascript淺析執(zhí)行機(jī)制的詳情

    這篇文章主要介紹了JavaScript執(zhí)行機(jī)制,想要搞懂JavaScript執(zhí)行機(jī)制,便與進(jìn)程與線程的概念脫不了干系,下面我們就來看看這JavaScript執(zhí)行機(jī)制的具體介紹吧,需要的朋友可以參考一下
    2022-08-08
  • TypeScript聯(lián)合類型,交叉類型和類型保護(hù)

    TypeScript聯(lián)合類型,交叉類型和類型保護(hù)

    這篇文章主要介紹了TypeScript聯(lián)合類型,交叉類型和類型保護(hù),聯(lián)合類型就是定義一些類型,定義的變量只需要滿足任意一種類型即可,交叉類型就是需要滿足所有類型,交叉類型使用,更多內(nèi)容我們來看看下面文章詳細(xì)內(nèi)容吧
    2021-12-12

最新評論