在小程序中,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。