微信小程序事件流原理解析
這篇文章主要介紹了微信小程序事件流原理解析,文中通過(guò)示例代碼介紹的非常詳細(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)文章
使用layer彈窗和layui表單實(shí)現(xiàn)新增功能
最近做項(xiàng)目遇到這樣的需求使用layer在彈窗內(nèi)完成新增，成功后提示并刷新頁(yè)面，下面小編給大家?guī)?lái)了使用layer彈窗和layui表單做新增功能，具體實(shí)現(xiàn)代碼，參考下本文2018-08-08
JavaScript瀑布流布局實(shí)現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了JavaScript瀑布流布局的實(shí)現(xiàn)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
js取float型小數(shù)點(diǎn)后兩位數(shù)的方法
js中取小數(shù)點(diǎn)后兩位方法最常用的就是四舍五入函數(shù)了，前面我介紹過(guò)js中四舍五入一此常用函數(shù)，這里正好用上，下面我們一起來(lái)看取float型小數(shù)點(diǎn)后兩位一些方法總結(jié)2014-01-01
這篇文章主要為大家詳細(xì)介紹了微信JS-SDK選取手機(jī)照片上傳功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
通過(guò)js控制時(shí)間,一秒一秒自己動(dòng)的實(shí)例
下面小編就為大家?guī)?lái)一篇通過(guò)js控制時(shí)間,一秒一秒自己動(dòng)的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程
這篇文章主要介紹了webpack實(shí)踐之DLLPlugin 和 DLLReferencePlugin的使用教程，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
javascript鼠標(biāo)滑動(dòng)評(píng)分控件完整實(shí)例
這篇文章主要介紹了javascript鼠標(biāo)滑動(dòng)評(píng)分控件實(shí)現(xiàn)方法,以完整實(shí)例形式詳細(xì)分析了javascript操作鼠標(biāo)事件及頁(yè)面元素樣式實(shí)現(xiàn)評(píng)分效果的方法,需要的朋友可以參考下2015-05-05
js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的倒計(jì)時(shí)按鈕,實(shí)例分析了javascript倒計(jì)時(shí)效果的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06
JavaScript實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼的生成
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)4位隨機(jī)驗(yàn)證碼的生成，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
本文主要介紹了uniapp集成Echarts，實(shí)現(xiàn)地圖圖表的展示，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-06-06