JavaScript - Tương tác Sự kiện: Hướng dẫn cho Người mới bắt đầu

Xin chào các pháp sư JavaScript tương lai! ? Hôm nay, chúng ta sẽ bắt đầu một chuyến hành trình thú vị vào thế giới của Tương tác Sự kiện. Đừng lo lắng nếu bạn chưa từng nghe về nó trước đây - đến cuối bài hướng dẫn này, bạn sẽ tràn ngập kiến thức! (Thấy chưa? ?)

Tương tác Sự kiện là gì?

Hãy tưởng tượng bạn đang tham gia một buổi聚会 gia đình, và bạn kể một câu chuyện hài cho cousin của bạn. Cousin của bạn cười, sau đó dì của bạn nghe thấy và cười khúc khích, rồi ông bà nội của bạn cũng bắt đầu cười khúc khích. Đó giống như tương tác sự kiện trong JavaScript!

Trong thuật ngữ kỹ thuật, tương tác sự kiện là một cách truyền tải sự kiện trong cây DOM (Document Object Model) của HTML. Khi một sự kiện xảy ra trên một phần tử, nó trước tiên chạy các bộ xử lý trên phần tử đó, sau đó trên phần tử cha, và cuối cùng là các tổ tiên khác.

Hãy phá vỡ điều này với một ví dụ đơn giản:

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

document.getElementById('child').addEventListener('click', function() {
console.log('Phần tử con được nhấn!');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('Phần tử cha được nhấn!');
});

document.getElementById('grandparent').addEventListener('click', function() {
console.log('Phần tử ông nội được nhấn!');
});

Nếu bạn nhấn vào nút, bạn sẽ thấy điều này trong console:

Phần tử con được nhấn!
Phần tử cha được nhấn!
Phần tử ông nội được nhấn!

Đây là tương tác sự kiện trong hành động! Sự kiện bắt đầu từ nút (phần tử con), sau đó nổi bọt lên đến phần tử cha, và cuối cùng đến phần tử ông nội.

Bước của Tương tác Sự kiện

Bây giờ chúng ta đã hiểu khái niệm cơ bản, hãy phá vỡ các bước của tương tác sự kiện:

1. Sự kiện xảy ra trên phần tử sâu nhất (phần tử đích).
2. Bộ xử lý sự kiện trên phần tử đích chạy.
3. Sự kiện nổi bọt lên đến phần tử cha, và bộ xử lý sự kiện trên phần tử cha chạy.
4. Điều này tiếp tục cho đến khi đạt đến đối tượng document.

Đó giống như một trò chơi "pass the parcel" nơi mỗi phần tử có cơ hội xử lý sự kiện khi nó di chuyển lên cây DOM.

Tương tác Sự kiện với 2 Phần tử N nested

Hãy xem một ví dụ thực tế hơn với hai phần tử div嵌套:

<div id="outer" style="background-color: blue; padding: 20px;">
<div id="inner" style="background-color: red; padding: 20px;">
Nhấn vào tôi!
</div>
</div>

document.getElementById('outer').addEventListener('click', function() {
console.log('Phần tử outer được nhấn');
});

document.getElementById('inner').addEventListener('click', function() {
console.log('Phần tử inner được nhấn');
});

Khi bạn nhấn vào phần tử div đỏ trong, bạn sẽ thấy:

Phần tử inner được nhấn
Phần tử outer được nhấn

Sự kiện bắt đầu từ phần tử div trong và nổi bọt lên đến phần tử div ngoài. Đó giống như ném một viên đá vào ao - sóng bắt đầu từ trung tâm và lan ra ngoài!

Tương tác Sự kiện với 3 Mức嵌套

Bây giờ, hãy thêm một mức vào ví dụ của chúng ta:

<div id="grandparent" style="background-color: green; padding: 20px;">
<div id="parent" style="background-color: blue; padding: 20px;">
<div id="child" style="background-color: red; padding: 20px;">
Nhấn vào tôi!
</div>
</div>
</div>

document.getElementById('grandparent').addEventListener('click', function() {
console.log('Phần tử ông nội được nhấn');
});

document.getElementById('parent').addEventListener('click', function() {
console.log('Phần tử cha được nhấn');
});

document.getElementById('child').addEventListener('click', function() {
console.log('Phần tử con được nhấn');
});

Bây giờ, khi bạn nhấn vào phần tử div đỏ trong cùng, bạn sẽ thấy:

Phần tử con được nhấn
Phần tử cha được nhấn
Phần tử ông nội được nhấn

Đó giống như một阶梯 gia đình - người trẻ nhất nói trước, sau đó là cha mẹ, và cuối cùng là ông bà!

Dừng Tương tác Sự kiện

Đôi khi, bạn có thể muốn dừng hành vi nổi bọt này. Có lẽ bạn không muốn ông bà nghe thấy câu chuyện hài đó sau tất cả! Trong JavaScript, chúng ta có thể làm điều này bằng cách sử dụng phương thức stopPropagation():

document.getElementById('child').addEventListener('click', function(event) {
console.log('Phần tử con được nhấn');
event.stopPropagation();
});

Bây giờ, khi bạn nhấn vào phần tử div con, bạn sẽ chỉ thấy:

Phần tử con được nhấn

Sự kiện dừng lại ngay tại đó, giống như đặt một nút trong chai!

Phương thức Hữu ích cho Xử lý Sự kiện

Dưới đây là bảng các phương thức hữu ích cho xử lý sự kiện trong JavaScript:

Phương thức	Mô tả
addEventListener()	Đính kèm một bộ xử lý sự kiện vào phần tử
removeEventListener()	Loại bỏ một bộ xử lý sự kiện khỏi phần tử
event.stopPropagation()	Dừng sự kiện nổi bọt lên cây DOM
event.preventDefault()	Ngăn chặn hành động mặc định của sự kiện
event.target	Trả về phần tử đã kích hoạt sự kiện
event.currentTarget	Trả về phần tử mà bộ xử lý sự kiện đã kích hoạt

Kết luận

Và thế là bạn đã có nó, các bạn! Chúng ta đã cùng nhau khám phá khái niệm Tương tác Sự kiện trong JavaScript. Nhớ rằng, việc hiểu rõ tương tác sự kiện là rất quan trọng để quản lý xử lý sự kiện phức tạp trong các ứng dụng web của bạn. Đó giống như hiểu rõ động lực gia đình tại một buổi reunion - biết ai nghe gì và khi nào có thể giúp bạn tránh được rất nhiều rối loạn!

Thực hành với các ví dụ này, thử nghiệm với các cấu trúc嵌套 khác nhau, và sớm bạn sẽ xử lý sự kiện như một chuyên gia. Chúc mừng coding, và hy vọng các sự kiện của bạn luôn nổi bọt mượt mà! ?

Credits: Image by storyset