Khác nhau giữa Target vs currentTarget Javascript

Hê lu các bạn 😁, lại là mình đây. Hôm nay các bạn đã học được những nội dung kiến thức nào về Javascript rồi 🙌. Trong bài viết này, chúng ta sẽ cùng nhau học thêm một kiến thức khác liên quan đến Javascript nhé. Hôm nay, chúng ta sẽ cùng tìm hiểu sự khác nhau giữa thuộc tính target và currentTarget trong tham số event của JavaScript nhé.

Để hiểu rõ sự khác nhau giữa target và currentTarget chúng ta cùng xem một ví dụ nhé 😉.

Đầu tiên ta tạo 1 div chứa button như sau:

<div class="container">
  <button class="btn">Say hi</button>
</div>

Gán sự kiện click cho div:

const container = document.querySelector('.container');

container.addEventListener('click',function(event){
  console.log('target', event.target);
  console.log('current target', event.currentTarget);
})

Bây giờ nếu ta thử click vào element trên thì output sẽ là:

target <button class="btn"></button>
current target <div class="container"></div>

Chúng ta sẽ thấy kết quả thu được sẽ khác nhau.

event.target: là phần tử mà user tương tác (vd: click). ở ví dụ trên thì khi user click vào button say hi ở trên thì target là phần tử user vừa click. target có thể là element container hoặc là phần tử bên trong container.

event.currentTarget: là phần tử mà chúng ta đã addEventListener tức là phần tử trước . hay phần tử chúng ta đang listen - lắng nghe.

Xét thêm ví dụ bên dưới để các bạn hiểu rõ hơn nhé 😁.

Khi click vào button Say bye thì:

1. target <button class="btn">Say bye</button> (Bạn vừa click vào button này)
2. current target <div class="container">…</div> (Nơi bạn gắn sự kiện listen)

Khi click vào button Close thì:

1. target <button>Close</button>
2. current target <div class="container">…</div> (Luôn là element trước .addEventListener)

Như các bạn thấy ở trên thì sau mỗi hành động click thì kết quả là target nơi chúng ta click => element có thể thay đổi, còn currentTarget sẽ không thay đổi.

Hi vọng bài viết sẽ giúp ích cho các bạn. Chúc các bạn học tốt 😉😁😁.