第五節事件 · 小程序

[TOC] # 1.事件分類事件分為冒泡事件和非冒泡事件：冒泡事件：當一個組件上的事件被觸發后，該事件會向父節點傳遞。非冒泡事件：當一個組件上的事件被觸發后，該事件不會向父節點傳遞。 ## 類型觸發條件最低版本 | touchstart | 手指觸摸動作開始 | |---|---| | touchmove | 手指觸摸后移動 | |touchcancel |手指觸摸動作被打斷，如來電提醒，彈窗| |touchend |手指觸摸動作結束 |tap| 手指觸摸后馬上離開 |longpress| 手指觸摸后，超過350ms再離開，如果指定了事件回調函數并觸發了這個|事件，tap事件將不被觸發 1.5.0 longtap |會在 WXSS transition 或 wx.createAnimation 動畫結束后觸發 animationstart |會在一個 WXSS animation 動畫開始時觸發 animationiteration |會在一個 WXSS animation 一次迭代結束時觸發 animationend |會在一個 WXSS animation 動畫完成時觸發 touchforcechange |在支持 3D Touch 的 iPhone 設備，重按時會觸發 > 注：除上表之外的其他組件自定義事件如無特殊聲明都是非冒泡事件，如`<form/>`的submit事件，`<input/>`的input事件，`<scroll-view/>`的scroll事件，(詳見各個組件) # 2.事件綁定和冒泡 > 事件綁定的寫法同組件的屬性，以 key、value 的形式。如: bindtap="jump" ## 原生組件 catchtap bindtap ## 自基礎庫版本 1.5.0 起，在非原生組件中 bind:tap catch:tap ## 什么是事件冒泡 > 事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標簽 > bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。 ``` <view id="outer" bindtap="handleTap1"> 爺爺 //只調用爺爺 bind對下不影響 <view id="middle" catchtap="handleTap2"> 爸爸 <view id="inner" bindtap="handleTap3"> 兒子 //點擊兒子會先后調用兒子和爸爸 bind 向上冒泡 </view> </view> </view> ``` # 3.事件對象 ## target 觸發事件的源組件。 | 屬性 | 類型| 說明| |---|---|---| | id | String |事件源組件的id |tagName| String |當前組件的類型 |dataset |Object |事件源組件上由data-開頭的自定義屬性組成的集合 ## currentTarget 事件綁定的當前組件屬性 |類型 |說明 |---|---|---| id |String |當前組件的id tagName| String |當前組件的類型 dataset |Object |當前組件上由data-開頭的自定義屬性組成的集合 ## target和currentTarget 的區別 > target 正在被點擊的組件 currentTarget 指事件(catchtap )捕獲的組件 ### catchtap事件 ``` ?//wxml <view class='parent' catchtap='parent' data-title= "parenttitle"> <view class='child' data-title="childtitle"></view>  </view> ``` ``` //js parent(event){ // console.log(event.target.dataset.title); //點擊子 childtitle 點擊父是 parenttltie console.log(event.currentTarget.dataset.title) //點擊父子都是parenttitle }, child(event){ console.log("child") } ``` ### bindtap事件冒泡后的target 和currentTarget ``` ?//wxml <view class='parent' catchtap='parent' data-title= "parenttitle"> <view class='child' data-title="childtitle" bindtap="child"></view>  </view> ``` ``` //js parent(event){ // console.log(event.target.dataset.title); //點擊子 child childtitle 點擊父是 parenttltie targe指向點擊事件 console.log(event.currentTarget.dataset.title) //點擊父是parenttitle 點擊子是child parenttitle 因為bind會向上冒泡,而currentTarget指向綁定事件所以是parenttitle }, child(event){ console.log("child") } ```