微信小程序事件綁定


事件類別

tap:點擊事件;

longtap:長按事件;

touchstart:觸摸開始;

touchend:觸摸結束;

touchcansce:取消觸摸;

事件綁定

bind綁定;

catch綁定;(能阻止事件冒泡)

例如:綁定點擊事件 bindtap

page.wxml 文件

<button bindtap="btnclick"></button>

page.js 文件

復制代碼
//獲取應用實例 const app = getApp() Page({ data: { text: "你好", onOff: false }, btnclick:function(){ console.log('123'); var onOff = this.data.onOff; this.setData({text:"hello",onOff:!onOff}); } })
復制代碼

 事件詳解:(類型 type ; 時間戳 timeStamp;事件源組件 target ; 當前事件 currentTarget ; 觸摸點數 touches)

例如:打印一個點擊事件

顯示:

currentTarget:是我們點擊的這個 view;

target:是我們目標的這個 view;

可以給這個 view 加一個 id:

效果:

在冒泡的事件中: currentTarget 和 target是不一致的; currentTarget是我們綁定了的組件,target是發生事件的組件;

currentTarget里面的 dataset是沒有數據的。這個是為了方便我們添加我們自定義的屬性:

可以看到:

通過點擊事件,可以獲取到這個空間的屬性,從而可以方便我們的邏輯。

這個會很實用; 

調用項目下的其他事件及調用app.js里面的事件:

復制代碼
//index.js //獲取應用實例 const app = getApp() Page({ data: { text: '按鈕', }, btnclick:function(){ var that = this; console.log('不錯'); that.btnchange(); //調用項目的其他事件 app.clickBtn(); //調用app.js里面的事件  }, btnchange:function(){ console.log('yes'); } })
復制代碼


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM