1. 程式人生 > >e.currentTarget與e.target的區別

e.currentTarget與e.target的區別

當一個dom觸發被觸發一個事件後,事件會冒泡,如果冒泡到父節點,且父節點也繫結相同e.事件的話就會觸發該事件。這是可通過e.currentTarget 和 e.target來判斷事件的繫結物件和觸發物件分別是誰。

 <ul id="fa">
   <li class="son1">son1</li>
   <li class="son2">son2</li>
   <li class="son3">son3</li>
</ul>
let fa = document.getElementById('fa');
fa.onclick = function(e) {
  console.log(`%ccurrentTarget: %c${e.currentTarget.innerHTML}`, 'color: red', 'color: red');
  console.log(`%ctarget: %c${e.target.innerHTML}`, 'color: yellow', 'color:yellow');
}

當點選紅色區域相當於在id=fa的節點上觸發時間,因此target、currentTarget均指向id=fa節點;

當點選son1、son2、son3時,事件是在子節點觸發,但事件是繫結在父節點上,因此currentTarget指向ul節點,target指向li節點,見下圖

總結:

e.currentTarget:指的是註冊事件物件

e.target:指的是實際觸發事件的物件