微信小程序事件流原理解析
這篇文章主要介紹了微信小程序事件流原理解析,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
一、什么是事件?
事件是視圖層到邏輯層的通訊方式;
事件可以將用戶的行為,反饋到邏輯層進(jìn)行處理;
事件可以綁定在組件上,觸發(fā)事件后,就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù);
事件對(duì)象可以攜帶額外信息。
二、事件模型
事件分為事件捕獲階段、事件冒泡階段、事件處理階段

事件對(duì)象的屬性:
- type:觸發(fā)事件的類型
- timestamp:觸發(fā)事件當(dāng)時(shí)的時(shí)間戳
- target:觸發(fā)事件的根源組件,包括觸發(fā)事件組件的id,類型,以及dataset自定義屬性的集合
- currentTarget:觸發(fā)事件的當(dāng)前組件,觸發(fā)當(dāng)前事件的id,類型,以及dataset自定義屬性的集合
- touches:表示我們停留在屏幕上觸摸點(diǎn)的一個(gè)信息;
- changedTouches:表示一個(gè)有變化的觸摸點(diǎn)的信息;
- detail:表示我們綁定事件所攜帶的數(shù)據(jù),包括x/y到頁(yè)面左上角的距離
currentTarget和target的區(qū)別,
currentTarget:表示當(dāng)前組件,
target:根源組件:
比如,如上圖,最外層綁定了一個(gè)點(diǎn)擊事件,最里面的那層綁定了一個(gè)點(diǎn)擊事件,當(dāng)點(diǎn)擊最里面那個(gè)事件,target代表了最外層的組件,currentTarget代表了最里面那個(gè)組件
三、事件的類型
可捕獲事件
touchstart、tap、touchmove、longpress、touchcancel、longtap、touchend
可冒泡事件
touchstart longtap、touchmove transitionend、touchcancel、animationstart、touchend、animationiteration、tap、animationend、longpress touchforcechan.、
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript中字符串分割函數(shù)split用法實(shí)例
這篇文章主要介紹了JavaScript中字符串分割函數(shù)split用法,實(shí)例分析了javascript中split函數(shù)操作字符串的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
微信小程序使用setData修改數(shù)組中單個(gè)對(duì)象的方法分析
這篇文章主要介紹了微信小程序使用setData修改數(shù)組中單個(gè)對(duì)象的方法,結(jié)合具體實(shí)例形式分析了setData進(jìn)行數(shù)組修改的相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12
dateformat.js超輕量級(jí)的JS日期處理庫(kù)的使用
dateformat.js 是一個(gè)非常簡(jiǎn)潔、輕量級(jí)、不到 5kb 的很簡(jiǎn)潔的 Javascript 庫(kù),本文主要介紹了dateformat.js超輕量級(jí)的JS日期處理庫(kù)的使用,感興趣的可以了解一下2023-12-12
javascript檢測(cè)對(duì)象中是否存在某個(gè)屬性判斷方法小結(jié)
檢測(cè)對(duì)象中屬性的存在與否可以通過以下幾種方法來(lái)判斷:使用in關(guān)鍵字、使用對(duì)象的hasOwnProperty()方法、用undefined判斷、在條件語(yǔ)句中直接判斷,感興趣的朋友可以了解下哈2013-05-05
layui實(shí)現(xiàn)三級(jí)導(dǎo)航菜單
這篇文章主要為大家詳細(xì)介紹了layui實(shí)現(xiàn)三級(jí)導(dǎo)航菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-07-07

