建站
咨詢
售后
建站咨詢
新聞中心
- 事件處理
- 事件示例
- 事件的分類
- 事件綁定和冒泡
- 事件的捕獲
- 事件對(duì)象
- 代碼示例
- target
- currentTarget
- detail
- dataset
- touch
- changedTouch
- Tips
事件處理
事件提供了一種可以將用戶的行為從視圖層反饋到邏輯層進(jìn)行處理的通訊方式。觸發(fā)綁定在組件上的事件的時(shí)候，就會(huì)執(zhí)行邏輯層中對(duì)應(yīng)的事件處理函數(shù)，同時(shí)也可以傳遞數(shù)據(jù)，例如 id、dataset 等。
10余年的巨鹿網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。成都營(yíng)銷網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整巨鹿建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“巨鹿網(wǎng)站設(shè)計(jì)”,“巨鹿網(wǎng)站推廣”以來(lái)，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
事件示例
目標(biāo)：
在組件中綁定一個(gè)事件處理函數(shù) bindtap 。
模板：
- SWAN
點(diǎn)擊
定義事件的處理函數(shù)：
- JS
Page({tapHandle(e) {swan.showToast(e.currentTarget.dataset.say);}});
效果：
當(dāng)用戶單擊組件時(shí)，顯示：”hello”。
事件的分類
與瀏覽器的 DOM 事件類似，智能小程序的視圖中事件分為冒泡事件和非冒泡事件。
- 冒泡事件指的是當(dāng)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞；
- 非冒泡事件指的是當(dāng)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞；
- 原生組件
video、live-player、canvas、cover-view、cover-image等從基礎(chǔ)庫(kù)1.12.0開始支持冒泡。
冒泡事件如下表，不在列表的事件均為非冒泡事件。
| 事件類型 | 觸發(fā)時(shí)機(jī) |
|---|---|
| tap | 觸摸后馬上離開 |
| longtap | 觸摸后超過(guò) 350ms 再離開（推薦使用 longpress 事件代替） |
| longpress | 觸摸后超過(guò) 350ms 再離開，如果是指定了事件回調(diào)函數(shù)并觸發(fā)了這個(gè)事件，tap 事件將不被觸發(fā) |
| touchstart | 觸摸開始時(shí) |
| touchmove | 觸摸后移動(dòng)時(shí) |
| touchcancel | 觸摸后被打斷時(shí)，如來(lái)電等 |
| touchend | 觸摸結(jié)束時(shí) |
| touchforcechange | 支持 3D Touch 的 iPhone 設(shè)備，重按時(shí)會(huì)觸發(fā) |
| transitionend | 會(huì)在 transition 或 swan.createAnimation 動(dòng)畫結(jié)束后觸發(fā) |
| animationstart | 會(huì)在 animation 動(dòng)畫開始時(shí)觸發(fā) |
| animationiteration | 會(huì)在 animation 一次迭代結(jié)束時(shí)觸發(fā) |
| animationend | 會(huì)在 animation 動(dòng)畫完成時(shí)觸發(fā) |
事件綁定和冒泡
事件綁定在組件上，與屬性的寫法相同（以 key、value 的形式）。
- key 以 bind 或 catch 開頭，銜接事件類型，例如 bindtap、catchtouchcancel 。也可以在 bind 和 catch 后可以緊跟一個(gè)冒號(hào)，如
bind:tap、catch:touchstart，其功能不變。 - bind 與 catch 的區(qū)別是 bind 事件綁定不會(huì)阻止冒泡事件向上冒泡，catch 事件綁定可以阻止冒泡事件向上冒泡；
- value 對(duì)應(yīng)的是在 Page 中定義同名的函數(shù)，否則在事件觸發(fā)時(shí)執(zhí)行函數(shù)會(huì)拋出異常。
代碼示例
- SWAN
wrapmoduletext
效果：
① 用戶單擊 text 會(huì)先后調(diào)用 handleTap3 和 handleTap2。這是因?yàn)?tap 事件冒泡到了 module，而 module 阻止了 tap 事件冒泡，不再向父節(jié)點(diǎn)傳遞
② 用戶單擊 module 會(huì)觸發(fā) handleTap2
③ 用戶單擊 wrap 會(huì)觸發(fā) handleTap1
事件的捕獲
捕獲階段是位于冒泡階段之前，在捕獲階段中，事件到達(dá)節(jié)點(diǎn)的順序與冒泡階段恰好相反。
在捕獲階段監(jiān)聽(tīng)的方式是采用capture-bind、capture-catch關(guān)鍵字，后者將中斷捕獲階段和取消冒泡階段。
代碼示例：capture-bind
- SWAN
wraptext
效果：
用戶單擊 text 會(huì)先后調(diào)用 handleTap2、handleTap4、handleTap3、handleTap1
代碼示例：capture-catch
- SWAN
wraptext
效果：
用戶單擊 text 只會(huì)調(diào)用 handleTap2
事件對(duì)象
默認(rèn)當(dāng)組件觸發(fā)事件時(shí)，邏輯層綁定事件的處理函數(shù)會(huì)收到一個(gè)默認(rèn)參數(shù)，即事件對(duì)象。
下面是事件對(duì)象詳細(xì)屬性列表：
| 屬性 | 類型 | 說(shuō)明 |
|---|---|---|
| type | String | 事件的類型 |
| timeStamp | Int | 頁(yè)面打開到觸發(fā)事件所經(jīng)過(guò)的毫秒數(shù) |
| target | Object | 觸發(fā)事件的組件的屬性值集合，詳細(xì)屬性參見(jiàn) target |
| currentTarget | Object | 當(dāng)前組件的一些屬性值集合，詳細(xì)屬性參見(jiàn) currentTarget |
| detail | Object | 自定義事件對(duì)象屬性列表，詳細(xì)屬性參見(jiàn) detail |
| touches | Array | 觸摸事件類型存在，存放當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組，touch 詳細(xì)屬性參見(jiàn) touch |
| changedTouches | Array | 觸摸事件類型存在，存放當(dāng)前變化的觸摸點(diǎn)信息的數(shù)組, changedTouch changedTouch |
代碼示例
在開發(fā)者工具中打開
在開發(fā)者工具中打開
在 WEB IDE 中打開
- SWAN
- JS
點(diǎn)擊我
Page({handleTap: function(e) {console.log(e);// e.type == “tap”// e.timeStamp == 1542// e.detail == {x: 270, y: 63}// e.touches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY: 63}]// e.changedTouches == [{identifier: 0, pageX: 270, pageY: 63, clientX: 270, clientY: 63}]// 當(dāng)點(diǎn)擊inner節(jié)點(diǎn)時(shí)// e.target 是inner view組件// e.currentTarget 是綁定了handleTap的outer view組件}})
下面是事件對(duì)象的屬性為屬性值集合時(shí)的詳細(xì)信息。這里需要注意的是 target 和 currentTarget 的區(qū)別,currentTarget 為當(dāng)前事件所綁定的組件，而 target 則是觸發(fā)該事件的源頭組件。
target
| 屬性 | 類型 | 說(shuō)明 |
|---|---|---|
| dataset | Object | 觸發(fā)事件組件上由 data-開頭的自定義屬性組成的集合,詳細(xì)屬性參見(jiàn) dataset |
| id | String | 觸發(fā)事件組件的 id |
| offsetTop | Int | 元素向上偏移的像素值 |
| offsetLeft | Int | 元素向左偏移的像素值 |
currentTarget
| 屬性 | 類型 | 說(shuō)明 |
|---|---|---|
| dataset | Object | 事件綁定的組件上由 data-開頭的自定義屬性組成的集合,詳細(xì)屬性參見(jiàn) dataset |
| id | String | 事件綁定的組件的 id |
| offsetTop | Int | 元素向上偏移的像素值 |
| offsetLeft | Int | 元素向左偏移的像素值 |
detail
是自定義事件所攜帶的數(shù)據(jù)，具體詳見(jiàn)組件定義中各個(gè)事件的定義。
dataset
在組件的事件被觸發(fā)時(shí)，也可以傳遞自定義的數(shù)據(jù)。
書寫方式： 以 data- 開頭，多個(gè)單詞由連字符-鏈接，不能有大寫(大寫會(huì)自動(dòng)轉(zhuǎn)成小寫)，最終的 - 在 dataset 中會(huì)將連字符轉(zhuǎn)成駝峰式寫法。
如組件上data-car-color屬性值的讀取方式是: event.currentTarget.dataset.carColor。
touch
| 屬性 | 類型 | 說(shuō)明 |
|---|---|---|
| identifier | Number | 觸摸點(diǎn)的標(biāo)識(shí)符 |
| clientX, clientY | Number | 距離頁(yè)面可顯示區(qū)域（屏幕除去導(dǎo)航條）左上角的 X 軸與 Y 軸的距離 |
| pageX, pageY | Number | 距離文檔左上角的 X 軸與 Y 軸的距離 |
changedTouch
數(shù)據(jù)格式同 touches，指的是有變化的觸摸點(diǎn)，如 touchstart（開始），touchmove（變化），touchend，touchcancel（結(jié)束）等。
點(diǎn)擊事件的 detail 帶有的 x, y 同 pageX, pageY 代表距離文檔左上角的距離。
Tips
請(qǐng)不要在組件中綁定 onClick、onAnimationstart、onDrag 等 HTML 原生事件，這會(huì)導(dǎo)致小程序的事件綁定不生效。
名稱欄目：創(chuàng)新互聯(lián)百度小程序教程：事件處理
網(wǎng)站網(wǎng)址：http://fisionsoft.com.cn/article/dhojpcp.html
