7.1 Event Bubbling (Sự kiện nổi lên)
Trong JavaScript, sự kiện diễn ra trong một phần tử có thể lan truyền qua DOM tree. Quá trình này được gọi là lan truyền sự kiện và bao gồm hai cơ chế chính: event bubbling và event capturing.
Cơ chế lan truyền sự kiện:
- Event Bubbling (Sự kiện nổi lên).
- Event Capturing (Bắt sự kiện).
Event Bubbling - là quá trình mà sự kiện xảy ra trong phần tử con, sau đó lan truyền tuần tự lên chuỗi các phần tử cha tới phần tử gốc (thường là document).
Giải thích:
- Khi nút
childđược bấm, đầu tiên là xử lý sự kiện ở phần tửchild(Child clicked) - Sau đó sự kiện nổi lên phần tử
parentvà xử lý của nó được kích hoạt (Parent clicked)
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Event Bubbling Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.2 Event Capturing (Bắt sự kiện)
Event Capturing - là quá trình mà sự kiện đầu tiên lan truyền từ phần tử gốc xuống qua chuỗi các phần tử cha tới phần tử đích, nơi sự kiện xảy ra.
Để sử dụng bắt sự kiện, cần thiết lập tham số capture thành true khi thêm xử lý sự kiện.
Giải thích:
- Khi nút
childđược bấm, đầu tiên là xử lý sự kiện ở phần tử parent (Parent clicked) nhờ thiết lập tham sốcapturethànhtrue - Sau đó sự kiện đến phần tử đích
childvà xử lý của nó được kích hoạt (Child clicked)
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Event Capturing Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
}, true);
child.addEventListener('click', function(event) {
console.log('Child clicked');
});
</script>
</body>
</html>
7.3 Mô hình ba giai đoạn lan truyền sự kiện
Trong quá trình xử lý sự kiện trong DOM có ba giai đoạn:
1. Capturing Phase (Giai đoạn bắt sự kiện). Sự kiện lan truyền từ phần tử gốc (thường là document) xuống qua chuỗi các phần tử cha tới phần tử đích.
2. Target Phase (Giai đoạn mục tiêu). Sự kiện đến phần tử đích, nơi sự kiện xảy ra.
3. Bubbling Phase (Giai đoạn nổi lên). Sự kiện lan truyền từ phần tử đích trở lên qua chuỗi các phần tử cha tới phần tử gốc.
Kiểm soát lan truyền sự kiện
Có các phương thức để quản lý lan truyền sự kiện:
stopPropagation(). Dừng sự lan truyền thêm của sự kiện cả trong thời gian nổi lên và bắt.stopImmediatePropagation(). Dừng sự lan truyền thêm của sự kiện và ngăn chặn thực hiện các xử lý sự kiện khác trên phần tử hiện tại.preventDefault(). Ngăn chặn hành động mặc định liên quan tới sự kiện (ví dụ, gửi form khi nhấn nút).
7.4 Ví dụ sử dụng stopPropagation
Giải thích:
- Khi nút
childđược bấm, xử lý sự kiện trên phần tửchildđược kích hoạt (Child clicked) - Sự kiện nổi lên bị dừng lại bằng
event.stopPropagation(), và xử lý sự kiện trên phần tử parent không được kích hoạt
<!DOCTYPE html>
<html>
<head>
<title>Stop Propagation Example</title>
</head>
<body>
<div id="parent">
<button id="child">Click Me</button>
</div>
<script>
const parent = document.getElementById('parent');
const child = document.getElementById('child');
parent.addEventListener('click', function(event) {
console.log('Parent clicked');
});
child.addEventListener('click', function(event) {
console.log('Child clicked');
event.stopPropagation(); // Dừng sự kiện nổi lên
});
</script>
</body>
</html>
GO TO FULL VERSION