Làm cách nào để tạo sự kiện của riêng tôi trong JavaScript?
Mã giao diện người dùng của bạn có thể nhanh chóng trở nên khó sử dụng khi xây dựng một ứng dụng phải phản ứng với nhiều sự kiện khác nhau. Ví dụ: trong một ứng dụng sử dụng ổ cắm web, không có gì lạ khi thấy mã như thế này Show
Không cần phải nói nếu bạn bắt đầu cần xử lý 20, 30 hoặc 40 sự kiện khác nhau, điều này có thể bắt đầu trở nên rất lộn xộn và nếu chúng ta muốn ngừng nghe một sự kiện cụ thể thì sao? . Rõ ràng phải có một cách tốt hơn để làm mọi việc Những gì chúng tôi có thể làm gì về nó?Lý tưởng nhất là chúng tôi có thể chuyển sự kiện và dữ liệu liên quan vào bộ điều phối sự kiện, sau đó sẽ gọi tất cả các chức năng chính xác cho chúng tôi. Chúng tôi cũng có thể dừng chạy một số chức năng - ví dụ: nếu cửa sổ hiện tại đã mở, chúng tôi không muốn tạo thông báo mới Đến cuối hướng dẫn này, chúng ta sẽ có thể biến đoạn mã trên thành một thứ giống như thế này
Điều này đã bắt đầu có tổ chức và mạnh mẽ hơn nhiều, và điều tốt nhất là chúng tôi có thể yêu cầu trình điều phối này từ bất kỳ đâu trong ứng dụng của mình - cho phép chúng tôi nhóm các sự kiện liên quan thành các tệp riêng biệt và quản lý các sự kiện của mình từ bất kỳ đâu. Chúng tôi cũng có thể có một số bộ điều phối cho các nhóm sự kiện khác nhau hoặc nhiều bộ điều phối cho nhiều kết nối websocket. Cấu trúc thực sự tùy thuộc vào bạn Hãy học cách xây dựng nó Xây dựng bộ điều phốiChúng tôi sẽ xây dựng cái này bằng cách sử dụng các lớp es6 để giữ cho mã của chúng tôi gọn gàng và hướng đối tượng. Hãy bắt đầu bằng cách xây dựng khung của các lớp, với mỗi phương thức chúng ta sẽ cần Lập bản đồ các bộ xương của các lớp
Chúng tôi đang khởi tạo 1 với một đối tượng trống, đây là nơi chúng tôi sẽ lưu trữ từng sự kiện được liên kết với bộ điều phối này. Các sự kiện cũng sẽ cần các phương thức riêng của chúng, vì vậy chúng ta sẽ phải tạo một lớp 2 cho các sự kiện
Lớp 2 được khởi tạo với 4 mà chúng tôi chuyển vào và một mảng 5 trống, nơi chúng tôi sẽ lưu trữ từng cuộc gọi lại đã đăng ký cho sự kiệnThực hiện các phương phápBây giờ chúng ta đã có khung của 6 và 2, chúng ta có thể bắt đầu triển khai từng phương pháp. Việc thêm một trình lắng nghe sự kiện mới có vẻ là một nơi tốt để bắt đầu, vì vậy hãy bắt đầu với phương thức 8
Chúng tôi đã sử dụng 9 ở đây, nhưng chúng tôi chưa xây dựng nó. Hãy xây dựng nó tiếp theo để làm cho 8 hoạt động
Tất cả những gì chúng ta làm ở đây là đẩy hàm gọi lại đã cho vào mảng gọi lại của sự kiện, đơn giản Bây giờ chúng ta có thể tạo các sự kiện và thêm các cuộc gọi lại, nhưng điều đó không hữu ích trừ khi chúng ta thực sự có thể chạy các cuộc gọi lại đó. Hãy xây dựng 1 tiếp theo
Để làm việc này, chúng ta cần triển khai phương thức 2
Tất cả những gì chúng tôi làm là lặp lại và gọi từng cuộc gọi lại, dễ dàng phải không? . Tất cả những gì chúng ta cần làm bây giờ là thực hiện loại bỏ người nghe. Hãy bắt đầu với phương pháp 3
Phương thức duy nhất còn lại để triển khai là phương thức 4, để chúng ta có thể xóa hàm gọi lại khỏi mảng hàm gọi lại
Chúng ta đã làm gì?Phù. Đã được thực hiện. hãy xem thành phẩm của chúng ta trông như thế nào 0Kết thúcĐó là một mã số lượng nhỏ cho rất nhiều chức năng. Đối với mục đích của hướng dẫn này, chúng tôi đã giữ mọi thứ tương đối đơn giản, có một số điều cần lưu ý Chúng tôi chưa thực hiện bất kỳ xử lý lỗi nào Vì vậy, có chúng tôi. Hãy nghĩ xem bạn có thể thêm chức năng nào khác vào chức năng này để làm cho nó mạnh mẽ hơn nữa và đừng giới hạn trí tưởng tượng của bạn trong việc sử dụng chức năng này với ổ cắm web - nó có thể rất tuyệt vời cho nhiều tình huống khác nhau Làm cách nào để tạo sự kiện tùy chỉnh trong JavaScript?Các bước dưới đây được thực hiện để tạo một sự kiện bằng cách sử dụng Sự kiện mới. . Chúng tôi tạo một sự kiện bằng cách sử dụng hàm tạo Sự kiện Chúng tôi lắng nghe sự kiện này bằng phương thức addEventListener() Chúng tôi kích hoạt hoặc gửi sự kiện bằng phần tử. phương thức công vănEvent(eventName) Sự kiện tùy chỉnh có tên bắt đầu hiện đã được tạo Làm cách nào để tạo và kích hoạt các sự kiện trong JavaScript?Ví dụ: để kích hoạt sự kiện nhấp chuột trên bất kỳ phần tử nào, bạn sử dụng phương thức click(). . el. nhấp chuột();. el. tiêu điểm(); . mơ hồ();. const frm = tài liệu. querySelector('form'); . Gửi đi(); . cài lại(); Làm cách nào để tạo sự kiện trong HTML?Cú pháp. phần tử. addEventListener(event, function, useCapture); Tham số đầu tiên là loại sự kiện (như " click " hoặc " mousedown " hoặc bất kỳ Sự kiện DOM HTML nào khác. ) Tham số thứ hai là hàm chúng ta muốn gọi khi sự kiện xảy ra.
Làm cách nào bạn có thể tạo các sự kiện của riêng mình trong nút JS?Nút. js cho phép chúng tôi tạo và xử lý các sự kiện tùy chỉnh một cách dễ dàng bằng cách sử dụng mô-đun sự kiện . Mô-đun sự kiện bao gồm lớp EventEmitter có thể được sử dụng để tăng và xử lý các sự kiện tùy chỉnh. |