• 事件處理
  • 事件示例
  • 事件的分類
  • 事件綁定和冒泡
  • 事件的捕獲
  • 事件對象
  • 代碼示例
    • target
    • currentTarget
    • detail
    • dataset
    • touch
    • changedTouch
  • Tips

事件處理

事件提供了一種可以將用戶的行為從視圖層反饋到邏輯層進行處理的通訊方式。觸發(fā)綁定在組件上的事件的時候，就會執(zhí)行邏輯層中對應(yīng)的事件處理函數(shù)，同時也可以傳遞數(shù)據(jù)，例如 id、dataset 等。

10余年的巨鹿網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都營銷網(wǎng)站建設(shè)的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整巨鹿建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“巨鹿網(wǎng)站設(shè)計”,“巨鹿網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

事件示例

目標(biāo)：
在組件中綁定一個事件處理函數(shù) bindtap 。

模板：

• SWAN

 
 
 

  
  
  
 點擊 
 
 
 

定義事件的處理函數(shù)：

• JS

 
 
 

  
  
  
Page({
  
  
  
 tapHandle(e) {
  
  
  
 swan.showToast(e.currentTarget.dataset.say);
  
  
  
 }
  
  
  
});
 
 
 

效果：
當(dāng)用戶單擊組件時，顯示：”hello”。

事件的分類

與瀏覽器的 DOM 事件類似，智能小程序的視圖中事件分為冒泡事件和非冒泡事件。

• 冒泡事件指的是當(dāng)組件上的事件被觸發(fā)后，該事件會向父節(jié)點傳遞；
• 非冒泡事件指的是當(dāng)組件上的事件被觸發(fā)后，該事件不會向父節(jié)點傳遞；
• 原生組件video、live-player、canvas、cover-view、cover-image等從基礎(chǔ)庫1.12.0開始支持冒泡。

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

事件類型	觸發(fā)時機
tap	觸摸后馬上離開
longtap	觸摸后超過 350ms 再離開（推薦使用 longpress 事件代替）
longpress	觸摸后超過 350ms 再離開，如果是指定了事件回調(diào)函數(shù)并觸發(fā)了這個事件，tap 事件將不被觸發(fā)
touchstart	觸摸開始時
touchmove	觸摸后移動時
touchcancel	觸摸后被打斷時，如來電等
touchend	觸摸結(jié)束時
touchforcechange	支持 3D Touch 的 iPhone 設(shè)備，重按時會觸發(fā)
transitionend	會在 transition 或 swan.createAnimation 動畫結(jié)束后觸發(fā)
animationstart	會在 animation 動畫開始時觸發(fā)
animationiteration	會在 animation 一次迭代結(jié)束時觸發(fā)
animationend	會在 animation 動畫完成時觸發(fā)

事件綁定和冒泡

事件綁定在組件上，與屬性的寫法相同（以 key、value 的形式）。

• key 以 bind 或 catch 開頭，銜接事件類型，例如 bindtap、catchtouchcancel 。也可以在 bind 和 catch 后可以緊跟一個冒號，如bind:tap、catch:touchstart，其功能不變。
• bind 與 catch 的區(qū)別是 bind 事件綁定不會阻止冒泡事件向上冒泡，catch 事件綁定可以阻止冒泡事件向上冒泡；
• value 對應(yīng)的是在 Page 中定義同名的函數(shù)，否則在事件觸發(fā)時執(zhí)行函數(shù)會拋出異常。

代碼示例

• SWAN

 
 
 

  
  
  
  
  
  
 wrap
  
  
  
 
  
  
  
 module
  
  
  
 
  
  
  
 text
  
  
  
 
  
  
  
 
  
  
  
 
 
 

效果：

① 用戶單擊 text 會先后調(diào)用 handleTap3 和 handleTap2。這是因為 tap 事件冒泡到了 module，而 module 阻止了 tap 事件冒泡，不再向父節(jié)點傳遞
② 用戶單擊 module 會觸發(fā) handleTap2
③ 用戶單擊 wrap 會觸發(fā) handleTap1

事件的捕獲

捕獲階段是位于冒泡階段之前，在捕獲階段中，事件到達節(jié)點的順序與冒泡階段恰好相反。
在捕獲階段監(jiān)聽的方式是采用capture-bind、capture-catch關(guān)鍵字，后者將中斷捕獲階段和取消冒泡階段。

代碼示例：capture-bind

• SWAN

 
 
 

  
  
  
  
  
  
 wrap
  
  
  
 
  
  
  
 text
  
  
  
 
  
  
  
 
 
 

效果：

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

代碼示例：capture-catch

• SWAN

 
 
 

  
  
  
  
  
  
 wrap
  
  
  
 
  
  
  
 text
  
  
  
 
  
  
  
 
 
 

效果：

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

事件對象

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

下面是事件對象詳細屬性列表：

屬性	類型	說明
type	String	事件的類型
timeStamp	Int	頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù)
target	Object	觸發(fā)事件的組件的屬性值集合，詳細屬性參見 target
currentTarget	Object	當(dāng)前組件的一些屬性值集合，詳細屬性參見 currentTarget
detail	Object	自定義事件對象屬性列表，詳細屬性參見 detail
touches	Array	觸摸事件類型存在，存放當(dāng)前停留在屏幕中的觸摸點信息的數(shù)組，touch 詳細屬性參見 touch
changedTouches	Array	觸摸事件類型存在，存放當(dāng)前變化的觸摸點信息的數(shù)組, changedTouch changedTouch

代碼示例

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• SWAN
• JS

 
 
 

  
  
  
  
  
  
 點擊我
  
  
  
 
 
 

 
 
 

  
  
  
  
  
  
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)點擊inner節(jié)點時
  
  
  
 // e.target 是inner view組件
  
  
  
 // e.currentTarget 是綁定了handleTap的outer view組件
  
  
  
 }
  
  
  
})
 
 
 

下面是事件對象的屬性為屬性值集合時的詳細信息。這里需要注意的是 target 和 currentTarget 的區(qū)別,currentTarget 為當(dāng)前事件所綁定的組件，而 target 則是觸發(fā)該事件的源頭組件。

target

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

currentTarget

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

detail

是自定義事件所攜帶的數(shù)據(jù)，具體詳見組件定義中各個事件的定義。

dataset

在組件的事件被觸發(fā)時，也可以傳遞自定義的數(shù)據(jù)。
書寫方式： 以 data- 開頭，多個單詞由連字符-鏈接，不能有大寫(大寫會自動轉(zhuǎn)成小寫)，最終的 - 在 dataset 中會將連字符轉(zhuǎn)成駝峰式寫法。
如組件上data-car-color屬性值的讀取方式是: event.currentTarget.dataset.carColor。

touch

屬性	類型	說明
identifier	Number	觸摸點的標(biāo)識符
clientX, clientY	Number	距離頁面可顯示區(qū)域（屏幕除去導(dǎo)航條）左上角的 X 軸與 Y 軸的距離
pageX, pageY	Number	距離文檔左上角的 X 軸與 Y 軸的距離

changedTouch

數(shù)據(jù)格式同 touches，指的是有變化的觸摸點，如 touchstart（開始），touchmove（變化），touchend，touchcancel（結(jié)束）等。

點擊事件的 detail 帶有的 x, y 同 pageX, pageY 代表距離文檔左上角的距離。

Tips

請不要在組件中綁定 onClick、onAnimationstart、onDrag 等 HTML 原生事件，這會導(dǎo)致小程序的事件綁定不生效。

標(biāo)題名稱：創(chuàng)新互聯(lián)百度小程序教程：事件處理
轉(zhuǎn)載來源：http://m.5511xx.com/article/dhojpcp.html