currentTarget và target là các thuộc tính của đối tượng sự kiện khi chúng ta lắng nghe một sự kiện cụ thể, ví dụ:
element.addEventListener('click', <a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> (e) {
// `currentTarget` and `target` are `e`'s properties
});
Sự khác biệt
currentTarget là phần tử mà sự kiện được ràng buộc. Nó không bao giờ thay đổi. Trong đoạn mã mẫu ở trên, e.currentTarget là phần tử.
target là phần tử mà người dùng đã nhấp vào, trong trường hợp sự kiện click . Nó có thể là phần tử gốc hoặc bất kỳ phần tử con nào của nó tùy thuộc vào nơi người dùng nhấp vào chính xác.
Cách sử dụng
Đây là một trường hợp sử dụng thể hiện cách sử dụng của cả hai thuộc tính.
Giả sử rằng chúng ta có một phương thức được hiển thị ở giữa màn hình. Phương thức được đặt bên trong một lớp phủ có kích thước đầy đủ của màn hình.
Việc đánh dấu khá đơn giản như sau:
<!-- Overlay -->
<div id="overlay">
<!-- Modal content -->
<div id="modal">...</div>
</div>
Đó là một trải nghiệm phổ biến cho người dùng khi đóng phương thức khi nhấp vào lớp phủ. Có hai cách tiếp cận để làm điều đó, nhưng trước tiên, chúng ta cần truy vấn các phần tử phương thức và lớp phủ:
const overlay = document.getElementById('overlay');
const modal = document.getElementById('modal');
Cách tiếp cận đầu tiên : Chúng tôi đóng phương thức khi người dùng nhấp vào lớp phủ:
overlay.addEventListener('click', function () {
console.log('Close the modal');
});
Điều gì xảy ra nếu người dùng nhấp vào bên trong phương thức? Chúng tôi không muốn sự kiện bong bóng thành phần tử mẹ (là lớp phủ), do đó stopPropagation phương thức được gọi là:
modal.addEventListener('click', function (e) {
e.stopPropagation();
});
Cách tiếp cận thứ hai : Để đảm bảo rằng người dùng nhấp vào khu vực lớp phủ chứ không phải bên trong phương thức, chúng ta có thể chỉ cần kiểm tra xem cả thuộc tính currentTargetvà target thuộc tính có tham chiếu đến cùng một phần tử hay không:
overlay.addEventListener('click', function (e) {
if (e.currentTarget === e.target) {
console.log('Close the modal');
}
});
Cách tiếp cận thứ hai đơn giản hơn nhiều so với cách tiếp cận đầu tiên và nó không yêu cầu xử lý sự kiện click của phương thức.
