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