&nbsp; &nbsp; &nbsp; Tại sao bạn kh&ocirc;ng thể truy cập currentTarget trong React's Async Handler?
<code>Event.target</code> v&agrave; <code>Event.currentTarget</code> l&agrave; c&aacute;c thuộc t&iacute;nh tr&ecirc;n <a href="https://www.w3.org/TR/DOM-Level-2/events.html#Events-interface">Giao diện sự kiện DOM</a>. N&oacute;i một c&aacute;ch đơn giản, đi&ecirc;̉m kh&aacute;c biệt giữa ch&uacute;ng l&agrave;:
<code>Event.currentTarget</code> l&agrave; phần tử m&agrave; sự kiện được đ&iacute;nh k&egrave;m. N&oacute; sẽ kh&ocirc;ng bao giờ thay đổi.
<code>Event.target</code> l&agrave; phần tử đ&atilde; k&iacute;ch hoạt sự kiện. N&oacute; phụ thuộc v&agrave;o ch&iacute;nh x&aacute;c nơi người d&ugrave;ng nhấp v&agrave;o.
Trước ti&ecirc;n ch&uacute;ng ta h&atilde;y sử dụng một phương thức để minh họa use case của ch&uacute;ng:
<pre class="language-python"><code>import './style.css';
 
 
const [overlay, modal, button] = ['overlay', 'modal', 'button'].map((i) =&gt;
 document.getElementById(i)
);
 
button.addEventListener('click', () =&gt; {
 console.log('Open the modal');
 overlay.style.display = 'block';
});
 
overlay.addEventListener('click', (event) =&gt; {
 console.log('event.currentTarget: ', event.currentTarget);
 console.log('event.target: ', event.target);
 
 console.log('Close the modal');
 overlay.style.display = 'none';
});
</code></pre>
Đ&acirc;y l&agrave; một bản demo đơn giản. Khi bạn nhấp v&agrave;o b&ecirc;n trong phương thức, bạn c&oacute; thể thấy rằng currentTarget trỏ đến lớp phủ v&agrave; c&aacute;c điểm target trỏ đến phương thức. Điều n&agrave;y cũng x&aacute;c nhận những th&ocirc;ng tin đ&atilde; đ&ecirc;̀ c&acirc;̣p ở tr&ecirc;n.
Nhưng khi bạn l&agrave;m vậy, bạn sẽ thấy n&oacute; đ&oacute;ng lại, đ&oacute; kh&ocirc;ng phải l&agrave; điều ch&uacute;ng t&ocirc;i mong đợi. Sau đ&oacute;, c&oacute; hai giải ph&aacute;p để xử lý:
<ul>
<li style="font-weight: 400;" aria-level="1">Li&ecirc;n kết một sự kiện với phương thức để ngăn sự kiện đ&oacute; nổi l&ecirc;n với phần tử mẹ. M&atilde; n&agrave;y l&agrave;:</li>
</ul>
<pre class="language-python"><code>modal.addEventListener('click', (event) =&gt; {
 event.stopPropagation();
});
</code></pre>
<ul>
<li style="font-weight: 400;" aria-level="1">Trong trường hợp được đ&iacute;nh k&egrave;m với overlay, bạn h&atilde;y kiểm tra xem currentTarget v&agrave; target c&oacute; giống nhau kh&ocirc;ng. Nếu ch&uacute;ng giống nhau, điều đ&oacute; chứng tỏ rằng người d&ugrave;ng đ&atilde; nhấp v&agrave;o v&ugrave;ng phủ thay v&igrave; b&ecirc;n trong phương thức.</li>
</ul>
<pre class="language-python"><code>overlay.addEventListener('click', (event) =&gt; {

 if (event.currentTarget === event.target) {

 console.log('Close the modal');

 overlay.style.display = 'none';

 }

});</code></pre>
Đ&acirc;y l&agrave; m&atilde; t&iacute;ch hợp, bạn c&oacute; thể loại bỏ ghi ch&uacute; để x&aacute;c minh:
<pre class="language-python"><code>// Import stylesheets

import './style.css';




const [overlay, modal, button] = ['overlay', 'modal', 'button'].map((i) =&gt;

 document.getElementById(i)

);




button.addEventListener('click', () =&gt; {

 console.log('Open the modal');

 overlay.style.display = 'block';

});




overlay.addEventListener('click', (event) =&gt; {

 console.log('event.currentTarget: ', event.currentTarget);

 console.log('event.target: ', event.target);




 if (event.currentTarget === event.target) {

 console.log('Close the modal');

 overlay.style.display = 'none';

 }

});




// modal.addEventListener('click', (event) =&gt; {

// event.stopPropagation();

// });</code></pre>
<code>target</code> được sử dụng nhiều hơn trong event delegation. V&iacute; dụ: nếu bạn c&oacute; một số lượng lớn c&aacute;c phần tử con cần li&ecirc;n kết c&aacute;c sự kiện, bạn chỉ c&oacute; thể li&ecirc;n kết một sự kiện tr&ecirc;n phần tử mẹ của n&oacute; v&agrave; sử dụng target để x&aacute;c định phần tử con khi n&oacute; k&iacute;ch hoạt. Điều n&agrave;y giúp cải thiện hiệu suất ứng dụng.
Event delegation cũng được sử dụng trong React v&agrave; trước phi&ecirc;n bản 17, React đ&atilde; &aacute;p dụng t&iacute;nh năng gộp sự kiện. Điều n&agrave;y c&oacute; nghĩa l&agrave; tất cả c&aacute;c đối tượng SyntheticEvent được gộp chung, tức l&agrave; sẽ được sử dụng lại v&agrave; tất cả c&aacute;c thuộc t&iacute;nh của ch&uacute;ng sẽ bị v&ocirc; hiệu h&oacute;a sau khi tr&igrave;nh xử l&yacute; sự kiện được gọi. V&igrave; vậy, nếu bạn muốn lấy c&aacute;c thuộc t&iacute;nh của đối tượng sự kiện trong tr&igrave;nh xử l&yacute; kh&ocirc;ng đồng bộ, bạn cần sử dụng <code>e.persist ()</code>.
C&aacute;c phi&ecirc;n bản 17 trở l&ecirc;n đ&atilde; loại bỏ cơ chế nh&oacute;m sự kiện v&agrave; bạn c&oacute; thể lấy c&aacute;c thuộc t&iacute;nh của đối tượng sự kiện trong tr&igrave;nh xử l&yacute; kh&ocirc;ng đồng bộ m&agrave; kh&ocirc;ng cần gọi <code>e.persist ()</code>.
Lưu &yacute; rằng gi&aacute; trị của <code>currentTarget</code> chỉ khả dụng khi xử l&yacute; c&aacute;c sự kiện. Khi được truy cập, việc thực thi m&atilde; bị tạm dừng v&agrave; gi&aacute; trị của <code>currentTarget</code> được trả về.
Nếu bạn in <code>event</code> trực tiếp, bạn sẽ thấy rằng thuộc t&iacute;nh <code>currentTarget</code> l&agrave; <code>null</code> hoặc bạn sẽ nhận được <code>null</code> nếu bạn muốn truy cập n&oacute; trong một h&agrave;m kh&ocirc;ng đồng bộ. Lưu &yacute; rằng điều n&agrave;y kh&ocirc;ng li&ecirc;n quan g&igrave; đến việc sử dụng React hay kh&ocirc;ng.
Vui l&ograve;ng xem v&iacute; dụ dưới đ&acirc;y:
<img style="width: 500px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/7ae10f19-6954-4165-a044-e66d1377c976" alt="target4" />
Cảm ơn bạn đã dành thời gian đọc. Hãy ti&ecirc;́p tục theo dõi và ủng h&ocirc;̣ các bài vi&ecirc;́t ti&ecirc;́p theo của <a href="https://tek4.vn/">Tek4.vn</a> nhé!

dev1_account1

Phân biệt target và currentTarget

Cùng tác giả

dev1_account1

Có liên quan