JavaScript - Lấy Điểm Sự Kiện: Hướng Dẫn Cho Người Mới Bắt Đầu

Xin chào các bạn future JavaScript wizards! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của Lấy Điểm Sự Kiện (Event Capturing). Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - tôi sẽ là người bạn thân thiện dẫn đường, và chúng ta sẽ cùng khám phá khái niệm này từng bước một. Vậy, hãy lấy một ly đồ uống yêu thích của bạn, và cùng tôi nhảy vào!

JavaScript - Event Capturing

Lấy Điểm Sự Kiện Là Gì?

Trước khi chúng ta đi vào chi tiết, hãy bắt đầu với một ví dụ đơn giản. Hãy tưởng tượng bạn đang tham gia một buổi聚会 gia đình, và em họ dễ thương của bạn nói một điều gì đó hài hước. Tiếng cười bắt đầu từ ông bà (thế hệ lớn tuổi nhất), sau đó lan đến cha mẹ bạn, và cuối cùng đến bạn. Điều này tương tự như cách lấy điểm sự kiện hoạt động trong JavaScript!

Trong thế giới phát triển web, lấy điểm sự kiện là một giai đoạn của sự lan truyền sự kiện nơi sự kiện đầu tiên được bắt bởi phần tử ngoài cùng và sau đó lan truyền đến các phần tử bên trong. Nó giống như một trò chơi "pass the parcel," nhưng với sự kiện!

Bây giờ, hãy phân tích điều này thành các thuật ngữ kỹ thuật hơn:

Khi một sự kiện xảy ra trên trang web (như một cú nhấp chuột), nó không chỉ xảy ra trên phần tử bạn đã nhấp.
Sự kiện bắt đầu từ đỉnh của cây DOM (Document Object Model).
Nó sau đó di chuyển qua tất cả các phần tử cha cho đến khi đạt được phần tử đích.
Chuyến đi xuống này chính là "lấy điểm sự kiện."

Ví Dụ: Lấy Điểm Sự Kiện Cơ Bản

Hãy nhìn vào một ví dụ cơ bản để thấy lấy điểm sự kiện trong hành động. Chúng ta sẽ tạo một cấu trúc HTML đơn giản và thêm một chút JavaScript để minh họa cách lấy điểm hoạt động.

<div id="outer">
<div id="middle">
<div id="inner">Nhấp vào tôi!</div>
</div>
</div>

<script>
const outer = document.getElementById('outer');
const middle = document.getElementById('middle');
const inner = document.getElementById('inner');

outer.addEventListener('click', function() {
console.log('Outer div được nhấp');
}, true);

middle.addEventListener('click', function() {
console.log('Middle div được nhấp');
}, true);

inner.addEventListener('click', function() {
console.log('Inner div được nhấp');
}, true);
</script>

Trong ví dụ này, chúng ta có ba phần tử <div> được嵌套. Mã JavaScript thêm các bộ监听 sự kiện nhấp vào mỗi div. Tham số true trong addEventListener cho phép lấy điểm sự kiện.

Khi bạn nhấp vào phần tử trong cùng, bạn sẽ thấy đầu ra sau trong console:

Outer div được nhấp
Middle div được nhấp
Inner div được nhấp

Điều này cho thấy sự kiện được lấy điểm từ phần tử ngoài cùng đến phần tử trong cùng. Nó giống như sự kiện đang nói "Xin chào!" với mỗi phần tử cha trên đường đi xuống đến đích.

Ví Dụ: Ngăn Chặn Behavior Mặc Định

Đôi khi, chúng ta muốn ngăn chặn hành vi mặc định của một sự kiện. Ví dụ, ngăn chặn việc gửi form hoặc ngăn chặn việc theo dõi một liên kết. Hãy xem cách chúng ta có thể làm điều này với lấy điểm sự kiện:

<div id="container">
<a href="https://www.example.com" id="link">Nhấp vào tôi!</a>
</div>

<script>
const container = document.getElementById('container');
const link = document.getElementById('link');

container.addEventListener('click', function(event) {
console.log('Container được nhấp');
event.preventDefault();
}, true);

link.addEventListener('click', function(event) {
console.log('Liên kết được nhấp');
}, true);
</script>

Trong ví dụ này, chúng ta có một liên kết trong một phần tử div chứa. Bộ监听 sự kiện của container sử dụng event.preventDefault() để ngăn chặn hành vi mặc định của liên kết.

Khi bạn nhấp vào liên kết, bạn sẽ thấy:

Container được nhấp
Liên kết được nhấp

Nhưng liên kết sẽ không thực sự đưa bạn đến URL. Nó giống như container đang nói, "Không đâu, chúng ta ở lại đây!"

Ví Dụ: Lấy Điểm và Ngăn Chặn Sự Lan Truyền

Đôi khi, chúng ta có thể muốn ngăn chặn sự kiện tiếp tục lan truyền xuống cây DOM. Chúng ta có thể làm điều này bằng cách sử dụng event.stopPropagation(). Hãy xem cách:

<div id="grandparent">
<div id="parent">
<div id="child">Nhấp vào tôi!</div>
</div>
</div>

<script>
const grandparent = document.getElementById('grandparent');
const parent = document.getElementById('parent');
const child = document.getElementById('child');

grandparent.addEventListener('click', function(event) {
console.log('Grandparent được nhấp');
}, true);

parent.addEventListener('click', function(event) {
console.log('Parent được nhấp');
event.stopPropagation();
}, true);

child.addEventListener('click', function(event) {
console.log('Child được nhấp');
}, true);
</script>

Trong ví dụ gia đình này, khi bạn nhấp vào phần tử con, bạn sẽ chỉ thấy:

Grandparent được nhấp
Parent được nhấp

Sự kiện dừng lại ở phần tử cha và không bao giờ đến phần tử con. Nó giống như phần tử cha đang nói, "Đủ rồi, sự kiện trẻ con!"

Kết Luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau hành trình qua vùng đất của lấy điểm sự kiện, từ khái niệm cơ bản đến ngăn chặn hành vi mặc định và ngăn chặn sự lan truyền. Nhớ rằng, lấy điểm sự kiện chỉ là một phần của quy trình sự kiện trong JavaScript. Nó giống như phần mở đầu trước khi chính sự kiện diễn ra (pun có ý).

Dưới đây là một tóm tắt nhanh về các phương thức chúng ta đã sử dụng:

Phương thức	Mô tả
`addEventListener(event, function, useCapture)`	Gắn một bộ xử lý sự kiện vào phần tử. Đặt `useCapture` thành `true` để lấy điểm sự kiện.
`event.preventDefault()`	Ngăn chặn hành vi mặc định của sự kiện.
`event.stopPropagation()`	Ngăn chặn sự lan truyền sự kiện lên cây DOM, ngăn chặn các bộ xử lý cha từ việc được thông báo về sự kiện.

Thực hành các khái niệm này, chơi với mã, và sớm bạn sẽ thành thạo việc lấy điểm sự kiện! Nhớ rằng, trong lập trình, cũng như trong cuộc sống, hành trình cũng quan trọng như đích đến. Chúc các bạn may mắn trong việc mã hóa, và hy vọng sự kiện của bạn luôn được lấy điểm tốt!

Credits: Image by storyset

Hướng Dẫn Trước:

JavaScript - Bong bóng sự kiện

Hướng Dẫn Tiếp Theo:

JavaScript - Sự kiện Tùy chỉnh