小程序中e.target與e.currentTarget區別詳解

在小程序中,e.target與e.currentTarget是非常重要的,尤其是涉及到頁面傳值時!本節只說兩者的區別,關於傳值下一節再詳細講解~

 

下面開始正文啦!!

先來大概梳理下邏輯,以便引申與更一步瞭解target與curentTarget。

 

 

在小程序中,事件分爲2種,冒泡與非冒泡。這不是重點!由於是要理清e.target和e.currentTarget的區別,所以下面從e入手來說。e爲事件對象,可以攜帶額外信息,如 id, dataset, touches。

 

小程序中,事件對象不止一種,如基礎事件對象、自定義事件對象等,下面只對普遍且常用的基礎事事件對象進行一個說明!

 

下面是官方截圖-----》基礎事件的屬性!紅色圈起來的兩個是非常重要的,通常涉及到頁面間傳值時會用到,所以務必要知道他們的區別以及需要注意的事項。

 

 

下面通過取id來實現e.target和e.currentTarget的區別展示

先來兩張官方截圖,從最最直觀的角度來看看它們有什麼異同!

 

 

target:觸發事件的源組件

currentTarget:事件綁定的當前事件

 

 

 

下面是實際操作過程,上圖說話!

 

 

從圖中可以看出,當點擊father這個組件時,target==currentTarget;當點擊child這個組件時,target與currentTarget不等。所以簡單的總結爲:

1>e.target 指向的是觸發事件監聽的對象。在上面,就是id爲child的這個組件。

2>e.currentTarget 指向的是添加(註冊)監聽事件的對象。在上面,就是id爲father的這個組件。

 

注意:“觸發事件監聽”的對象與“添加(註冊)監聽事件”的對象是不一樣的!前者是能夠觸發該事件但沒有綁定事件,後者指綁定了事件,如:bindtap、catchtap。

 

說明:取值方面

如果你點擊的是添加事件元素的子元素,就用e.currentTarget來獲取父元素的值,用e.target來獲取子元素的值,如果沒有子元素,就在本元素,e.target===e.currentTarget。

 

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章