Articles
Giới thiệu về TypeScript
Xử lý sự kiện trong TypeScript

Xử lý sự kiện trong TypeScript

Bài viết này giải thích cách xử lý sự kiện trong TypeScript.

Bạn có thể học về các phương pháp xử lý sự kiện và sự kiện tùy chỉnh thông qua các ví dụ mã.

YouTube Video

Xử lý sự kiện trong TypeScript

Xử lý sự kiện trong TypeScript được thực hiện giống như trong JavaScript. Tuy nhiên, TypeScript giúp tăng tính an toàn về kiểu, cho phép bạn xử lý sự kiện một cách an toàn bằng cách sử dụng đúng loại sự kiện. Cơ bản của xử lý sự kiện là thêm bộ lắng nghe sự kiện vào các phần tử DOM và thực thi các hành động khi có thao tác từ phía người dùng.

Thêm bộ lắng nghe sự kiện

Bộ lắng nghe sự kiện được thêm vào các phần tử DOM bằng phương thức addEventListener. Ví dụ, để xử lý sự kiện nhấn chuột, bạn thực hiện như sau:.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event) => {
4        console.log('Button was clicked');
5    });
6}
  • Trong đoạn mã này, addEventListener được sử dụng để đăng ký một trình xử lý cho sự kiện nhấp chuột trên phần tử DOM được chỉ định.

Các loại sự kiện trong TypeScript

Trong TypeScript, đối tượng event nhận được trong bộ lắng nghe sự kiện sẽ tự động được gán đúng loại. Đối tượng event có các thuộc tính khác nhau tùy thuộc vào loại sự kiện, nhưng loại cơ bản của nó là Event.

Bằng cách sử dụng đúng loại cho từng sự kiện, bạn có thể tận dụng tính an toàn về kiểu của TypeScript trong quá trình phát triển.

Các loại sự kiện chính

  1. Event Event là kiểu cơ sở cho các sự kiện thông thường. Dùng cho các sự kiện như gửi biểu mẫu hoặc hoàn tất tải trang.
1const form = document.getElementById('myForm');
2if (form) {
3    form.addEventListener('submit', (event: Event) => {
4        event.preventDefault();  // Prevent the default form submission
5        console.log('Form was submitted');
6    });
7}
  • Mã này phát hiện sự kiện gửi biểu mẫu, ngăn chặn hành động gửi mặc định và thay vào đó xuất ra một thông điệp trong bảng điều khiển.

  1. MouseEvent

    MouseEvent là loại sự kiện liên quan đến các thao tác chuột như nhấp chuột và di chuyển chuột. Bạn có thể lấy thông tin về tọa độ chuột và nút đã được nhấn.

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', (event: MouseEvent) => {
4        // Log the click position
5        console.log(`Click position: X=${event.clientX}, Y=${event.clientY}`);
6    });
7}
  • Mã này lấy tọa độ chuột khi nhấn nút và hiển thị chúng trong bảng điều khiển.
  1. KeyboardEvent KeyboardEvent là loại sự kiện liên quan đến nhập liệu bằng bàn phím. Bạn có thể truy cập phím đã bấm và trạng thái của các phím bổ trợ (Shift, Alt, Ctrl, v.v.).
1document.addEventListener('keydown', (event: KeyboardEvent) => {
2    // Log the pressed key
3    console.log(`Key pressed: ${event.key}`);
4    if (event.ctrlKey) {
5        // Log that the Ctrl key was pressed
6        console.log('Ctrl key was pressed');
7    }
8});
  • Mã này hiển thị tên của phím được nhấn và nếu giữ phím Ctrl, cũng xuất ra thông tin đó trong bảng điều khiển.
  1. InputEvent InputEvent là loại sự kiện liên quan đến những thay đổi trong các trường nhập liệu. Nó được sử dụng khi giá trị của trường văn bản hoặc textarea đã thay đổi.
1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: InputEvent) => {
4        // Log the entered value
5        console.log(`Entered value: ${input.value}`);
6    });
7}
  • Mã này hiển thị nội dung của trường nhập trong bảng điều khiển mỗi lần giá trị của nó thay đổi.
  1. FocusEvent FocusEvent là loại sự kiện xảy ra khi một phần tử được tập trung hoặc mất tập trung.
 1const input = document.getElementById('myInput');
 2if (input) {
 3    input.addEventListener('focus', (event: FocusEvent) => {
 4        // Log when the input gains focus
 5        console.log('Focused');
 6    });
 7
 8    input.addEventListener('blur', (event: FocusEvent) => {
 9        // Log when the input loses focus
10        console.log('Blurred');
11    });
12}
  • Mã này hiển thị "Focused" trong bảng điều khiển khi trường nhập được tập trung, và "Blurred" khi mất tập trung.

Xử lý sự kiện tùy chỉnh với xác minh kiểu

Với các sự kiện tùy chỉnh hoặc khi suy luận kiểu của TypeScript không hoạt động, bạn có thể chỉ định kiểu một cách rõ ràng bằng xác minh kiểu.

Ví dụ, để xử lý sự kiện cho một trường nhập liệu cụ thể (HTMLInputElement), hãy chỉ định kiểu như sau:.

1const input = document.getElementById('myInput') as HTMLInputElement;
2if (input) {
3    input.addEventListener('input', (event: Event) => {
4        const target = event.target as HTMLInputElement;
5        // Log the entered value
6        console.log(`Entered value: ${target.value}`);
7    });
8}
  • Mã này sử dụng khẳng định kiểu để xử lý mục tiêu sự kiện như một HTMLInputElement và hiển thị giá trị của nó trong bảng điều khiển.

Xóa bộ lắng nghe sự kiện

Bạn có thể xóa bộ lắng nghe sự kiện bằng removeEventListener. Đối với điều này, bạn cần truyền cùng một hàm xử lý sự kiện đã được thêm ban đầu.

 1const button = document.getElementById('myButton');
 2
 3const handleClick = (event: MouseEvent) => {
 4    // Log when the button is clicked
 5    console.log('Button was clicked');
 6};
 7
 8if (button) {
 9    button.addEventListener('click', handleClick);
10
11    // Remove the event listener later
12    button.removeEventListener('click', handleClick);
13}
  • Mã này thêm trình lắng nghe sự kiện nhấn nút, sau đó loại bỏ nó bằng cách chỉ định trình xử lý giống nhau.

Tạo sự kiện tùy chỉnh

Trong TypeScript, ngoài các sự kiện tiêu chuẩn, bạn còn có thể tạo và phát đi các sự kiện tùy chỉnh. Sử dụng lớp CustomEvent để tạo một sự kiện tùy chỉnh và kích hoạt nó bằng phương thức dispatchEvent.

 1const customEvent = new CustomEvent('myCustomEvent', { detail: { name: 'TypeScript' } });
 2const div = document.getElementById('myDiv');
 3
 4if (div) {
 5    div.addEventListener('myCustomEvent', (event: CustomEvent) => {
 6        // Log when the custom event is fired
 7        console.log(`Custom event was triggered: ${event.detail.name}`);
 8    });
 9
10    div.dispatchEvent(customEvent);  // Dispatch the custom event
11}
  • Mã này tạo một sự kiện tùy chỉnh bằng CustomEvent, phát đi sự kiện đó đến phần tử và hiển thị chi tiết của nó trong bảng điều khiển.

Kiểm soát sự lan truyền của sự kiện

Khi một sự kiện xảy ra, theo mặc định nó sẽ lan truyền (bubble) lên các phần tử cha. Để ngăn điều này, hãy sử dụng event.stopPropagation(). Bạn cũng có thể sử dụng preventDefault() để ngăn hành vi mặc định của trình duyệt.

 1const button = document.getElementById('myButton');
 2if (button) {
 3    button.addEventListener('click', (event: MouseEvent) => {
 4        event.preventDefault();  // Prevent the default action
 5        event.stopPropagation();  // Stop the event propagation
 6
 7        // Log that event handling has been customized
 8        console.log('Custom event handling');
 9    });
10}
  • Mã này vô hiệu hóa hành động mặc định khi nhấn nút, ngăn chặn lan truyền sự kiện và thực thi xử lý tùy chỉnh.

Tóm tắt

Xử lý sự kiện trong TypeScript về cơ bản giống như trong JavaScript, nhưng với các định nghĩa kiểu phù hợp, bạn có thể làm việc an toàn và đáng tin cậy với đối tượng sự kiện và phần tử DOM. Bằng cách thêm và xóa bộ lắng nghe sự kiện, áp dụng loại sự kiện và sử dụng xác minh kiểu, bạn có thể thực hiện việc xử lý sự kiện rõ ràng hơn và ít lỗi hơn.

Bạn có thể làm theo bài viết trên bằng cách sử dụng Visual Studio Code trên kênh YouTube của chúng tôi. Vui lòng ghé thăm kênh YouTube.

YouTube Video

Shadow DOM trong TypeScriptFetch/XMLHttpRequest trong TypeScript