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:事件觸發的當前事件

(當前事件,可能是觸發事件的源組件,可能是觸發的事件組件(即觸發事件源組件的子元素),

此時點擊子元還是父元素,都是當前事件,應用e.currentTarget)。

 

 

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

 

 

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

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

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

 

注意:“觸發事件監聽”的對象與“添加(注冊)監聽事件”的對象是不一樣的!

前者是能夠觸發該事件但沒有綁定事件,后者指綁定了事件,如:bindtap、catchtap。

 

說明:取值方面(一般用於頁面傳值)

1、如果綁定的事件所在組件沒有子元素,則用e.target===e.currentTarget一樣;

2、如果事件綁定在父元素中,且該父元素有子元素,

     當用e.currentTarget時,不管點擊父元素所在區域還是子元素(當前事件),都正確執行,

     若用e.target時,點擊父元素所在區域無錯,點擊子元素區域,執行報錯-------》

     報錯的原因是事件沒綁定在子元素上,是在父元素上,子元素要用e.currentTarget才正確!

   

總之:使用e.target時要注意,e.currentTarget就無所謂了~ 

 

 

版權聲明:本文為CSDN博主「CaseyWei」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/caseywei/java/article/details/85602458


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM