Hiểu sự kiện lan truyền trong JavaScript
Các sự kiện trong JavaScript hoạt động giống như thông báo rằng một tương tác của người dùng hoặc hành động khác đã diễn ra. Ví dụ: khi bạn nhấp vào nút biểu mẫu, trình duyệt của bạn tạo ra một sự kiện để cho biết điều này đã xảy ra. Việc nhập vào hộp tìm kiếm cũng làm nảy sinh các sự kiện và đây là cách tính năng tự động đề xuất thường hoạt động trực tuyến.
Trong JavaScript, các sự kiện liên quan đến tương tác của người dùng thường kích hoạt các phần tử cụ thể. Ví dụ: việc nhấp vào một nút làm tăng sự kiện so với nút đó. Nhưng các sự kiện cũng có tác dụng lan truyền: chúng chống lại các phần tử khác trong hệ thống phân cấp tài liệu.
Đọc tiếp để tìm hiểu tất cả về lan truyền sự kiện và hai loại riêng biệt có sẵn.
Mục Lục
Xử lý sự kiện trong JavaScript là gì?
Bạn có thể sử dụng mã JavaScript để nắm bắt và phản hồi các sự kiện mà một trang web tạo ra. Bạn có thể làm điều này để ghi đè hành vi mặc định hoặc thực hiện hành động khi không có mặc định nào tồn tại. Một ví dụ phổ biến là xác thực biểu mẫu. Xử lý sự kiện cho phép bạn làm gián đoạn quá trình gửi biểu mẫu bình thường.
Hãy xem xét ví dụ này:
<div>
<button id="button">Click Me</button>
</div><script>
const button = document.getElementById("button");
button.addEventListener("click", ()=>{
alert("Hello World");
});
</script>
Đoạn mã trên có một phần tử nút với một nút có tên id. Nó có một trình nghe sự kiện nhấp chuột hiển thị một cảnh báo với thông báo Chào thế giới.
Truyền bá sự kiện là gì?
Sự lan truyền sự kiện mô tả thứ tự mà các sự kiện di chuyển qua cây DOM khi trình duyệt web kích hoạt chúng.
Giả sử có một thẻ biểu mẫu bên trong thẻ div và cả hai đều có trình nghe sự kiện onclick. Sự kiện lan truyền mô tả cách một người nghe sự kiện có thể kích hoạt sau cái kia.
Có hai loại nhân giống:
-
Sự kiện sủi bọt, theo đó các sự kiện bong bóng lên, từ con đến cha.
-
Ghi lại sự kiện, theo đó các sự kiện đi xuống dưới, từ cấp độ gốc sang cấp độ con.
Sự kiện bong bóng trong JavaScript là gì?
Sủi bọt sự kiện có nghĩa là hướng lan truyền sự kiện sẽ từ phần tử con đến phần tử mẹ của nó.
Hãy xem xét ví dụ sau. Nó có ba phần tử lồng nhau: div, form và button. Mỗi phần tử có một nhấp chuột người nghe sự kiện. Trình duyệt hiển thị một báo động với một thông báo khi bạn nhấp vào từng phần tử.
Theo mặc định, thứ tự mà trình duyệt web hiển thị cảnh báo sẽ là nút, biểu mẫu, sau đó là div. Các sự kiện nổi lên từ trẻ em đến phụ huynh.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event propagation example</title>
</head>
<body>
<div id="div" style="background:#22577E; color:white">
div
<form id="form" style="background:#5584AC; color:white">
form <br/><br/>
<button id="button" style="background:#95D1CC; color:#22577E; border: solid 2px #22577E;
padding: 15px 40px;">
Button
</button>
</form>
</div>
<script>
const div = document.getElementById("div");
const form = document.getElementById("form");
const button = document.getElementById("button");div.addEventListener("click", ()=>{
alert("div");
});
form.addEventListener("click", ()=>{
alert("form")
});
button.addEventListener("click", ()=>{
alert("button")
});
</script>
</body>
</html>
Chụp sự kiện là gì?
Với việc nắm bắt sự kiện, thứ tự lan truyền ngược lại với sự sôi sục. Nếu không, khái niệm là giống hệt nhau. Sự khác biệt duy nhất với việc thu thập là các sự kiện xảy ra từ cha mẹ sang con. Ngược lại với ví dụ trước, với tính năng chụp sự kiện, trình duyệt sẽ hiển thị các cảnh báo theo thứ tự sau: div, biểu mẫu và nút.
Để đạt được khả năng nắm bắt sự kiện, bạn chỉ cần thực hiện một thay đổi đối với mã. Tham số thứ hai của addEventListener () xác định kiểu lan truyền. Nó là sai theo mặc định, để biểu thị sự sủi bọt. Để bật tính năng chụp sự kiện, bạn cần đặt thông số thứ hai thành true.
div.addEventListener("click", ()=>{
alert("div")
}, true);
form.addEventListener("click", ()=>{
alert("form")
}, true);
button.addEventListener("click", ()=>{
alert("button")
}, true);Làm thế nào bạn có thể ngăn chặn sự lan truyền sự kiện?
Bạn có thể dừng việc truyền bá các sự kiện bằng cách sử dụng stopPropagation () phương pháp. Các addEventListener () phương thức chấp nhận một tên sự kiện và một hàm xử lý. Trình xử lý nhận một đối tượng sự kiện làm tham số của nó. Đối tượng này nắm giữ tất cả thông tin về sự kiện.
Khi bạn gọi stopPropagation () phương thức, sự kiện sẽ ngừng lan truyền từ thời điểm đó. Ví dụ, khi bạn sử dụng stopPropagation () trên phần tử biểu mẫu, các sự kiện sẽ ngừng sôi lên đến div. Nếu bạn nhấp vào nút, bạn sẽ thấy các sự kiện được đưa ra trên nút và biểu mẫu, nhưng không thấy div.
form.addEventListener("click", (e)=>{
e.stopPropagation();
alert("form");
});
JavaScript có rất nhiều sức mạnh
Khả năng xử lý sự kiện của JavaScript rất mạnh mẽ, có thể so sánh với nhiều ngôn ngữ giao diện hoàn chỉnh. Khi bạn đang phát triển các ứng dụng web tương tác, đó là một phần quan trọng trong hộp công cụ của bạn. Nhưng còn rất nhiều chủ đề nâng cao khác cần nắm bắt. Đối với các nhà phát triển JavaScript chuyên nghiệp, có rất nhiều điều để học hỏi!
Nếu bạn muốn học cách viết mã JavaScript như một người chuyên nghiệp, hãy xem hướng dẫn của chúng tôi để biết cách viết một cách thông minh và chuẩn bị thán phục trong cuộc phỏng vấn tiếp theo của bạn.
Đọc tiếp
Giới thiệu về tác giả
