完全弄懂小程序e.target與e.currentTarget

 

　　　1、小程序中關於事件對象  e  的屬性中有兩個特別重要的屬性：target與currentTarget屬性：對於這兩個屬性，官方文檔上的解釋是：

　　　　　target：事件源組件對象

　　　　　currentTarget：當前組件對象

　　可能這兩句解釋有點官方，反正我一開始看的時候是稀裏糊塗、丈二和尚摸不着頭腦，爲了弄清楚它們之間的區別，我寫了一個簡單的代碼，代碼以下：

 1 <view id="outter" bindtap="tap1">
 2    outer view
 3    <view id="middle" catchtap="tap2">
 4      middle view
 5      <view id="inner" bindtap="tap3">
 6        inner view
 7       </view>
 8    </view>
 9 </view>
10 
11 tap1: function(e){
12   console.log(1,e)  
13 }
14 
15 tap2: function(e){
16   console.log(2,e)  
17 }
18 tap3: function(e){
19   console.log(3,e)  
20 }

　　能夠看到，tap1與tap3使用的是bind關鍵字綁定tap事件，由於tap事件屬於冒泡事件，因此會發生事件冒泡。

　　從上圖能夠看到，點擊子元素inner，由於子元素使用bind關鍵字而且tap又是冒泡事件，因此點擊inner，父元素middle也會觸發tap事件，可是因爲middle使用catch關鍵字，因此tap事件將不會向上傳播到outer元素，所以上圖中只顯示2和3。從這張圖能夠明確看出：

　　e.target是tap點擊事件觸發的對象（也就是點擊的是誰）

　　e.currentTarget是事件綁定在哪一個元素上（也就是這個事件在哪一個組件上）。

 

 

當事件沒有冒泡行爲時，e.target與e.currentTarget都指向事件觸發的對象。代碼以下，tap一、tap二、tap3都是用catch關鍵字綁定，因此不會發生冒泡行爲

1 <view id="outter" catchtap="tap1">
 2    outer view
 3    <view id="middle" catchtap="tap2">
 4      middle view
 5      <view id="inner" catchtap="tap3">
 6        inner view
 7       </view>
 8    </view>
 9 </view>
10 
11 tap1: function(e){
12   console.log(1,e)  
13 }
14 
15 tap2: function(e){
16   console.log(2,e)  
17 }
18 tap3: function(e){
19   console.log(3,e)  
20 }

 

 

 

 

2、你不知道的小程序事件的貓膩

　　一、小程序中的事件分爲兩類：冒泡事件與非冒泡事件

　　冒泡事件有：touchstart   touchmove   touchend  longtap   tap這五個事件，其他的事件爲非冒泡事件。

　　二、冒泡事件冒泡的條件：父元素與子元素綁定同一類事件而且子元素的綁定方式是bind（catch開頭會阻止事件冒泡），代碼以下：

 1 <view  id="outer"  bindtap="tap1">
 2     outer
 3     <view  id="inner"  catchtap="tap2">
 4         inner
 5     </view>
 6 </view>
 7 
 8 tap1: function（e）{
 9   console.log(1,e)  
10 }
11 
12 tap2: function(e){
13   console.log(2,e)  
14 }

點擊inner元素，只會執行tap2事件，

　　三、子元素綁定longtap長按事件會觸發父元素的tap點擊事件

1 <view  id="outer"  catchtap="tap1">
 2     outer
 3     <view  id="inner"  catchlongtap="tap2">
 4         inner
 5     </view>
 6 </view>
 7 
 8 tap1: function（e）{
 9   console.log(1,e)  
10 }
11 
12 tap2: function(e){
13   console.log(2,e)  
14 }

　　在inner元素上，長按inner會輸出2，對象e，長按事件的事件默認爲350ms後觸發事件，在鬆開手後會觸發tap1事件。這裏我就偷點懶就不貼圖了。

　　四、父元素使用touchstart  touchmove  touchend事件，將會覆蓋子元素的事件；例如子元素#inner  綁定tap事件，父元素#outer 綁定touchstart事件，點擊子元素，只會觸發父元素的touchstart事件；

可是，在打印出來的事件對象  e 的結果中，e.target 顯示的是事件觸發的元素(inner)，e.currentTarget顯示的是這個touchstart事件綁定的組件（這裏是outer）

 

以上就是小程序中e.target與e.currentTarget之間的區別。可能個人道行尚淺，若是文中內容有出錯的地方或者是描述的不到位的地方，歡迎各位前端前輩、同行一塊兒交流學習。個人qq:1540302851