Trình xử lý sự kiện là gì?

Một trình xử lý sự kiện sẽ chỉ được kích hoạt sau khi bạn thêm nó vào phần tử JavaScript tương ứng. Để làm điều đó, bạn có thể sử dụng cú pháp như sau:

• element.addEventListener(event, listener);
• element.addEventListener(event, listener, useCapture);
• element.addEventListener(event, listener, options);

Ví dụ, các nhà phát triển có thể gọi hàm sau để liên kết trình xử lý sự kiện nhấp chuột với một phần tử nút. 

btn.addEventListener("nhấp", RespondMouseClick);

Bạn cũng có thể thêm nhiều trình xử lý sự kiện vào một đối tượng sự kiện cụ thể mà không cần ghi đè lên trình xử lý sự kiện hiện có.

Ví dụ, Amazon Web Services (AWS) cho phép các nhà phát triển liên kết nhiều hàm callback trên đối tượng AWS.Request. Để biết thêm thông tin, hãy đọc hướng dẫn sử dụng trình xử lý sự kiện đối tượng yêu cầu trên AWS.

Tham số để thêm các sự kiện

Dưới đây là lời giải thích về các tham số trong cú pháp trước đó:

• Tham số sự kiện là bất kỳ sự kiện JavaScript hợp lệ nào, chẳng hạn như nhấp chuột, thay đổi, di chuột, nhấn phím và tải. 
• Tham số trình xử lý sự kiện là hàm callback sự kiện hoặc hàm JavaScript được tạo ra để đáp ứng các sự kiện cụ thể. 
• Tham số useCapture là tham số tùy chọn cho biết chế độ lan truyền sự kiện. Tham số này chấp nhận các giá trị Boolean, trong đó true activates nắm bắt trong khi false kích hoạt sủi bọt. Giá trị mặc định của tham số này được đặt thành false. 
• Tham số tùy chọn bao gồm một số giá trị tùy chọn, bao gồm cơ chế nắm bắt và tín hiệu từ chối, đại diện cho hành vi của trình xử lý sự kiện. 

Trình xử lý sự kiện lồng nhau là trình xử lý sự kiện được thêm vào các phần tử HTML tại các lớp phân cấp khác nhau.

Trong ví dụ HTML sau đây, tài liệu sở hữu phần tử cha cơ bản, trong khi phần tử cha sở hữu phần tử con. 

<div class="document">

<div class="parent">

<div class="child"></div>

</div>

</div>

Các ứng dụng web phức tạp có thể có nhiều lớp cha-con với các hàm của trình xử lý sự kiện tương ứng. Khi một sự kiện cụ thể xảy ra sẽ làm kích hoạt trình xử lý sự kiện tại các lớp khác nhau theo trình tự cụ thể. Ví dụ, khi nhấp vào nút con sẽ truyền sự kiện đến tất cả các trình xử lý mà nắm bắt cú nhấp chuột.

Các sự kiện có thể lan truyền theo hai cơ chế—sủi bọt và nắm bắt. 

Sủi bọt sự kiện

Sủi bọt là cơ chế mặc định của xử lý sự kiện JavaScript. Cơ chế này lan truyền sự kiện từ lớp trong cùng đến lớp ngoài cùng.

Ví dụ, một người dùng có thể di chuột qua một ô văn bản trong phần con. Sau đó, ứng dụng có thể truyền sự kiện theo thứ tự sau:

1. Trình xử lý sự kiện trong phần tử con sẽ xử lý sự kiện di chuột. 
2. Sau đó, trình xử lý sự kiện trong phần tử cha sẽ xử lý sự kiện và chuyển quyền kiểm soát cho trình xử lý sự kiện của tài liệu. 

Để thiết lập cơ chế sủi bọt sự kiện, hãy sử dụng cú pháp sau đây:

• element.addEventListener(event, listener, [false]);
• element.addEventListener(event, listener);

Nắm bắt sự kiện

Nắm bắt sự kiện là cơ chế xử lý sự kiện đặc biệt trong JavaScript nơi sự kiện lan truyền vào trong từ lớp ngoài cùng. Khi sự kiện đạt đến phần tử đích ở lớp bên trong, cơ chế xử lý sự kiện sẽ thay đổi thành sủi bọt. Sau đó, cơ chế sủi bọt lan truyền sự kiện ra ngoài đến lớp trên cùng.

Ví dụ, người dùng có thể nhấp vào nút con và bắt đầu trình tự sau:

1. Trình xử lý sự kiện của tài liệu xử lý sự kiện nhấp chuột, tiếp theo là trình xử lý sự kiện của phần tử cha.
2. Sự kiện này đạt đến phần tử đích, đó là nút. Trình xử lý sự kiện của nút sẽ xử lý sự kiện.
3. Quá trình xử lý sự kiện chuyển từ cơ chế nắm bắt sang cơ chế sủi bọt.
4. Sự kiện nhấp chuột tương tự kích hoạt trình xử lý sự kiện tại phần tử cha trước khi kết thúc tại tài liệu.

Cách chọn giữa cơ chế sủi bọt và cơ chế nắm bắt

Cơ chế sủi bọt và nắm bắt cho phép bạn xử lý các sự kiện khác nhau. Cơ chế sủi bọt hiếm khi được sử dụng vì cơ chế nắm bắt đủ để xử lý hầu hết các sự kiện trong các ứng dụng.

Khi bạn quyết định chọn giữa cơ chế sủi bọt và nắm bắt, bạn nên xem xét dòng làn truyền sự kiện và mức độ phù hợp với logic lập trình trong ứng dụng của bạn. 

Ví dụ, hãy xem xét một biểu mẫu cha bao gồm hai phần tử con. Phần tử đầu tiên yêu cầu cập nhật ngay lập tức khi một sự kiện xảy ra tại phần tử thứ hai. Trong trường hợp này, bạn nên sử dụng cơ chế nắm bắt. Cơ chế này đảm bảo rằng trình xử lý sự kiện tại phần tử cha xử lý sự kiện và cập nhật phần tử đầu tiên. Sau đó, cơ chế chuyển quyền kiểm soát cho trình xử lý sự kiện tại phần tử con thứ hai. 

Amazon Web Services (AWS) cung cấp AWS SDK for JavaScript để bạn có thể dễ dàng sử dụng dịch vụ trong các ứng dụng của mình với thư viện và API.

Bạn có thể sử dụng SDK để phát triển các ứng dụng phía máy chủ, ứng dụng web và ứng dụng web dùng trên thiết bị di động. SDK hỗ trợ thời gian hoạt động JavaScript, Node.JS và React Native, cũng như thời gian hoạt động chéo. Điều này cho phép các nhà phát triển chạy cùng một gói dịch vụ máy khách trên các nền tảng khác nhau.

Dưới đây là những lợi ích khác của việc sử dụng SDK:

• SDK được viết bằng TypeScript. Điều này đem lại các lợi ích như kiểm tra kiểu tĩnh và hỗ trợ lớp và mô-đun.
• SDK cung cấp tập hợp phần mềm trung gian cho phép bạn thực hiện các thao tác tùy chỉnh.
• SDK có kiến trúc mô-đun. Điều này cho phép bạn chỉ sử dụng các gói cần thiết để tối ưu hóa hiệu suất của ứng dụng.

Hãy bắt đầu sử dụng các ứng dụng JavaScript bằng cách đăng ký tài khoản AWS ngay hôm nay.