事件小程序
事件就是用戶到界面(視圖)的交互行爲,移動端常見的交互行爲(觸屏,觸摸移動,長按,鍵盤,多點觸控,搖一搖,各類狀態事件,...,重按)
事件綁定動畫
在小程序中綁定事件使用bind(不會阻止冒泡),catch capture-bind使用捕獲、capture-catch關鍵字,後者將中斷捕獲階段和取消冒泡階段 //bind事件綁定不會阻止冒泡事件向上冒泡,catch事件綁定能夠阻止冒泡事件向上冒泡。 兩種寫法 bind:tap bindtap catch:tap catchtap 例如:<view bindTap='{{clickFn}}'></view> **在page.js中** Page({ clickFn(event){ console.log(event) } })
事件分類ui
事件分爲冒泡事件和非冒泡事件
1.冒泡事件:當一個組件上的事件被觸發後,該事件會向父節點傳遞。(點擊、移動、觸摸打斷touchcancel,tap輕按,longpress長按,longtap長按,transitionstart,animationiteration迭代結束,動畫監聽) 2.非冒泡事件:當一個組件上的事件被觸發後,該事件不會向父節點傳遞。(例如:表單相關事件、加載相關事件)
交互事件spa
觸摸 touchstart
移動 touchmove
打斷 touchcancel
離開 touchend
輕觸 tap
長按(超過350ms) longtap longpress
重按(3D Touch 設備) touchforcechange
**監聽事件**
transitionend 會在 WXSS transition 或 wx.createAnimation 動畫結束後觸發 animationstart 會在一個 WXSS animation 動畫開始時觸發 animationiteration 會在一個 WXSS animation 一次迭代結束時觸發 animationend 會在一個 WXSS animation 動畫完成時觸發 touchforcechange 在支持 3D Touch 的 iPhone 設備,重按時會觸發
Event對象code
{
type:事件類型, timeStamp:時間戳, target:觸發事件的組件的屬性值的集合{ id:事件源組件id, tagName:當前組件的類型, dataset:事件源組件上由data-開頭的自定義屬性組成的集合 }, currentTarget:當前組件的一些屬性值集合, detail:額外信息{x,y}觸摸點的位置, touches:手指列表, changedTouches:移動了的手指信息 }