• 事件處理
  • 事件示例
  • 事件的分類
  • 事件綁定和冒泡
  • 事件的捕獲
  • 事件對(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ǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“巨鹿網(wǎng)站設(shè)計(jì)”,“巨鹿網(wǎng)站推廣”以來，每個(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ǔ)庫1.12.0開始支持冒泡。

冒泡事件如下表，不在列表的事件均為非冒泡事件。

事件類型	觸發(fā)時(shí)機(jī)
tap	觸摸后馬上離開
longtap	觸摸后超過 350ms 再離開（推薦使用 longpress 事件代替）
longpress	觸摸后超過 350ms 再離開，如果是指定了事件回調(diào)函數(shù)并觸發(fā)了這個(gè)事件，tap 事件將不被觸發(fā)
touchstart	觸摸開始時(shí)
touchmove	觸摸后移動(dòng)時(shí)
touchcancel	觸摸后被打斷時(shí)，如來電等
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

 
 
 

  
  
  
  
  
  
 wrap
  
  
  
 
  
  
  
 module
  
  
  
 
  
  
  
 text
  
  
  
 
  
  
  
 
  
  
  
 
 
 

效果：

① 用戶單擊 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)聽的方式是采用capture-bind、capture-catch關(guān)鍵字，后者將中斷捕獲階段和取消冒泡階段。

代碼示例：capture-bind

• SWAN

 
 
 

  
  
  
  
  
  
 wrap
  
  
  
 
  
  
  
 text
  
  
  
 
  
  
  
 
 
 

效果：

用戶單擊 text 會(huì)先后調(diào)用 handleTap2、handleTap4、handleTap3、handleTap1

代碼示例：capture-catch

• SWAN

 
 
 

  
  
  
  
  
  
 wrap
  
  
  
 
  
  
  
 text
  
  
  
 
  
  
  
 
 
 

效果：

用戶單擊 text 只會(huì)調(diào)用 handleTap2

事件對(duì)象

默認(rèn)當(dāng)組件觸發(fā)事件時(shí)，邏輯層綁定事件的處理函數(shù)會(huì)收到一個(gè)默認(rèn)參數(shù)，即事件對(duì)象。

下面是事件對(duì)象詳細(xì)屬性列表：

屬性	類型	說明
type	String	事件的類型
timeStamp	Int	頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù)
target	Object	觸發(fā)事件的組件的屬性值集合，詳細(xì)屬性參見 target
currentTarget	Object	當(dāng)前組件的一些屬性值集合，詳細(xì)屬性參見 currentTarget
detail	Object	自定義事件對(duì)象屬性列表，詳細(xì)屬性參見 detail
touches	Array	觸摸事件類型存在，存放當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組，touch 詳細(xì)屬性參見 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

屬性	類型	說明
dataset	Object	觸發(fā)事件組件上由 data-開頭的自定義屬性組成的集合,詳細(xì)屬性參見 dataset
id	String	觸發(fā)事件組件的 id
offsetTop	Int	元素向上偏移的像素值
offsetLeft	Int	元素向左偏移的像素值

currentTarget

屬性	類型	說明
dataset	Object	事件綁定的組件上由 data-開頭的自定義屬性組成的集合,詳細(xì)屬性參見 dataset
id	String	事件綁定的組件的 id
offsetTop	Int	元素向上偏移的像素值
offsetLeft	Int	元素向左偏移的像素值

detail

是自定義事件所攜帶的數(shù)據(jù)，具體詳見組件定義中各個(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

屬性	類型	說明
identifier	Number	觸摸點(diǎn)的標(biāo)識(shí)符
clientX, clientY	Number	距離頁面可顯示區(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)致小程序的事件綁定不生效。

當(dāng)前名稱：創(chuàng)新互聯(lián)百度小程序教程：事件處理
網(wǎng)頁URL：http://www.dlmjj.cn/article/dhojpcp.html