8.1 Tạo sự kiện tùy chỉnh
Sự kiện tùy chỉnh (hay sự kiện người dùng) trong JavaScript cho phép lập trình viên tạo ra và phát đi các sự kiện riêng của mình, điều này có thể rất hữu ích để truyền tải thông tin và tương tác giữa các phần khác nhau của ứng dụng. Việc tạo và sử dụng sự kiện tùy chỉnh có thể cải thiện cấu trúc và tính linh hoạt của mã, cung cấp một cách để thông báo và quản lý trạng thái ứng dụng.
Để tạo các sự kiện tùy chỉnh, ta sử dụng constructor CustomEvent. Constructor này cho phép tạo ra các sự kiện mới với các tham số có thể tùy chỉnh và dữ liệu bổ sung.
Cú pháp:
const event = new CustomEvent(type, {detail: additionalData});
Trong đó:
type: chuỗi đại diện cho tên sự kiệndetail: đối tượng chứa các dữ liệu bổ sung sẽ được truyền cùng với sự kiện
Ví dụ tạo sự kiện tùy chỉnh:
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello, world!' } });
8.2 Phát đi sự kiện tùy chỉnh
Việc phát đi sự kiện được thực hiện bằng cách sử dụng phương thức dispatchEvent. Phương thức này được gọi trên phần tử mà trên đó sự kiện cần xảy ra.
Giải thích:
- Thêm xử lý sự kiện
myCustomEventvào nútmyButton, sẽ in ra console thông báo từ dữ liệu của sự kiện - Tạo ra sự kiện tùy chỉnh
myCustomEventvới thông báo trongdetail - Sự kiện được phát đi trên nút
myButton, gọi hàm xử lý và in ra thông báo trong console
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Example</title>
</head>
<body>
<button id="myButton">Button</button>
<script>
const button = document.getElementById('myButton');
// Thêm xử lý sự kiện cho sự kiện tùy chỉnh
button.addEventListener('myCustomEvent', function(event) {
console.log('Custom event received:', event.detail.message);
});
// Tạo và phát đi sự kiện tùy chỉnh
const myEvent = new CustomEvent('myCustomEvent', { detail: { message: 'Hello, world!' } });
button.dispatchEvent(myEvent);
</script>
</body>
</html>
8.3 Ứng dụng của sự kiện tùy chỉnh
Sự kiện tùy chỉnh hữu ích khi tạo mã có tính mô-đun và bảo trì cao hơn, đặc biệt khi làm việc với các thành phần và ứng dụng phức tạp. Chúng cho phép một thành phần thông báo cho các thành phần khác về những thay đổi hoặc hành động đã xảy ra.
Giải thích:
- Mô-đun A phát đi sự kiện tùy chỉnh
notifyBtrên phần tửmoduleB, truyền tải dữ liệu - Mô-đun B lắng nghe sự kiện
notifyBvà xử lý, in ra thông báo trong console
Ví dụ ứng dụng của sự kiện tùy chỉnh trong ứng dụng mô-đun:
<!DOCTYPE html>
<html>
<head>
<title>Module Communication Example</title>
</head>
<body>
<div id="moduleA">Module A</div>
<div id="moduleB">Module B</div>
<script>
const moduleA = document.getElementById('moduleA');
const moduleB = document.getElementById('moduleB');
// Mô-đun A phát đi sự kiện tùy chỉnh
function notifyModuleB() {
const event = new CustomEvent('notifyB', { detail: { message: 'Data from Module A' } });
moduleB.dispatchEvent(event);
}
// Mô-đun B lắng nghe sự kiện tùy chỉnh
moduleB.addEventListener('notifyB', function(event) {
console.log('Module B received:', event.detail.message);
});
// Mô phỏng hành động trong Mô-đun A
notifyModuleB();
</script>
</body>
</html>
8.4 Tham số của sự kiện tùy chỉnh
Sự kiện tùy chỉnh có thể được cấu hình thêm bằng các tham số sau:
bubbles: giá trị logic, chỉ định liệu sự kiện có nổi lên hay không. Mặc định làfalsecancelable: giá trị logic, chỉ định liệu sự kiện có thể bị hủy bỏ hay không. Mặc định làfalsecomposed: giá trị logic, chỉ định liệu sự kiện có nên lan tỏa ra ngoài shadow DOM hay không. Mặc định làfalse
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<title>Custom Event Parameters Example</title>
</head>
<body>
<div id="container">
<button id="myButton">Button</button>
</div>
<script>
const container = document.getElementById('container');
const button = document.getElementById('myButton');
// Thêm xử lý cho container và nút
container.addEventListener('customEvent', function(event) {
console.log('Container received:', event.detail.message);
});
button.addEventListener('customEvent', function(event) {
console.log('Button received:', event.detail.message);
});
// Tạo và phát đi sự kiện tùy chỉnh với các tham số
const myEvent = new CustomEvent('customEvent', {
detail: { message: 'Hello from button' },
bubbles: true,
cancelable: true,
composed: false
});
button.dispatchEvent(myEvent);
</script>
</body>
</html>
GO TO FULL VERSION