JavaScript: Hiểu về CustomEvent và công vănEvent

Trong bài viết này, tôi sẽ cố gắng giải thích cách chúng ta có thể tạo và gửi các sự kiện bằng cách sử dụng Event, hàm CustomEventtạo và dispatchEvent()phương thức. Chúng ta cũng sẽ khám phá cách thức và mục đích sử dụng các sự kiện tùy chỉnh và công vănEvent trong các dự án của chúng ta.

Tôi hy vọng bạn sẽ có thể tạo các sự kiện tùy chỉnh vào cuối bài viết này.

Vậy hãy bắt đầu!

Một ứng dụng web bao gồm một loạt các sự kiện và có thể nói rằng những sự kiện này là một trong những phần thiết yếu nhất của ứng dụng web.

Trong một số trường hợp, sự kiện JavaScript mặc định không đáp ứng yêu cầu của chúng tôi. Ví dụ: trong các ứng dụng của mình, chúng tôi đang sử dụng một số sự kiện tùy chỉnh không có sẵn trong các sự kiện JavaScript mặc định để thêm thông báo, làm mới một số dữ liệu, v.v. Chúng ta sẽ xem xét những sự kiện này trong phần còn lại của bài viết.

Làm cách nào chúng tôi có thể tạo các sự kiện tùy chỉnh?

Có hai cách để tạo sự kiện tùy chỉnh.

• Cách đầu tiên là sử dụng hàm tạo Sự kiện .
• Cách thứ hai là sử dụng hàm tạo CustomEvent mà chúng tôi thích hơn.

Người xây dựng sự kiện

Bạn có thể tạo các sự kiện tùy chỉnh bằng hàm tạo Sự kiện như sau:

Xin lưu ý rằng tên sự kiện không phân biệt chữ hoa chữ thường. Vì vậy NOTIFICATION_ADD cũng giống như Notification_Add hoặc notification_add .

const event = new Event('NOTIFICATION_ADD');

Như chúng tôi đã đề cập ở trên, nếu chúng tôi muốn thêm nhiều dữ liệu hơn vào đối tượng sự kiện, chúng tôi có thể sử dụng hàm tạo CustomEvent như sau:

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

Vâng, sự kiện đã được tạo ra. Cái gì tiếp theo? Tất nhiên, chúng tôi muốn sử dụng nó trong dự án của chúng tôi. Bước cuối cùng để kích hoạt một sự kiện là gọi phương thức ClarkEvent(). Nó chấp nhận một tham số sự kiện bên trong là một đối tượng Sự kiện.

Để tôi chỉ cho bạn một ví dụ.

const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

// We are dispatching the our custom event here.
window.dispatchEvent(event);

// Let's say we have a handleAddNotification function inside our project like below
function handleAddNotification(e) {
  // logic here.
  
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

<button onclick="handleButtonClick()">
  Create my account
</button>
const event = new CustomEvent('NOTIFICATION_ADD', { 
  detail: {
    title: 'Error!',
    message: 'There was a problem creating your account.'
  }
});

function handleButtonClick(){
 window.dispatchEvent(event);
}

function handleAddNotification(e) {
  alert(e.detail.title + ' ' + e.detail.message);
}

window.addEventListener('NOTIFICATION_ADD', handleAddNotification);

Chúng ta sử dụng nó cho mục đích gì và ở đâu?

Trước khi đọc, bạn có thể muốn tra cứu các bài viết này về micro frontend.

Trong CicekSepeti, chúng tôi có kiến ​​trúc giao diện người dùng vi mô ở đây và có các thành phần tùy chỉnh như nút, chú giải công cụ, thông báo, hộp kiểm, v.v. và một số đoạn. Đôi khi giao tiếp là cần thiết giữa các thành phần và các mảnh này. Ngay tại thời điểm này, các sự kiện tùy chỉnh sẽ giúp chúng tôi.

Nếu để nói về các ví dụ, chúng tôi có một thành phần thông báo trên điều khiển từ xa và muốn hiển thị nó trên một trong các trang sau một số giao dịch.

Trong trường hợp này, thành phần thông báo có trình xử lý sự kiện có tên 'NOTIFICATION_ADD' và trang có biểu mẫu đăng ký. Khi người dùng nhấn nút đăng ký, chúng tôi sẽ tạo một yêu cầu API và sau đó hiển thị thông báo thành công hoặc báo lỗi thông qua phương thức ClarkEvent và hàm tạo sự kiện tùy chỉnh.

Nhờ các trình xử lý sự kiện trên thành phần thông báo, chúng tôi có thể kích hoạt các sự kiện tùy chỉnh đã được xác định trước đó trong các dự án khác ở bất cứ đâu và bất cứ khi nào chúng tôi muốn.

Bản tóm tắt

Việc sử dụng các sự kiện tùy chỉnh JavaScript có thể cải thiện cả trải nghiệm người dùng và trải nghiệm phát triển ứng dụng của bạn khi được sử dụng đúng cách . Từ giờ trở đi, chúng tôi biết rằng mình có thể sử dụng các sự kiện tùy chỉnh khi các sự kiện mặc định của JavaScript như sự kiện bàn phím, sự kiện chuột, v.v. không đáp ứng yêu cầu của chúng tôi.

Người giới thiệu