JavaScript có thể phản ứng với các sự kiện

Sự kiện là một trong những tính năng không thể thiếu của web như chúng ta biết. Không có sự kiện, web sẽ nhạt nhẽo kinh khủng

Sự kiện là các hành động xảy ra trên một trang web đối với các phần tử HTML. Bất cứ khi nào có điều gì đó xảy ra trên một trang web, bạn có thể chắc chắn rằng đó rất có thể là một sự kiện, từ khi trang tải ban đầu, đến việc người dùng nhấp vào nút, đóng hoặc thay đổi kích thước cửa sổ. Chúng là tất cả các ví dụ về các sự kiện khác nhau xảy ra trong trình duyệt

Là một ngôn ngữ kịch bản dành cho web, JavaScript cho phép chúng ta thực thi mã để phản ứng lại sự xuất hiện của một sự kiện được kích hoạt bởi các phần tử HTML

Đối với các khung JavaScript, các sự kiện cũng có thể được sử dụng để truyền dữ liệu dễ dàng qua một ứng dụng. Ví dụ: React chỉ hỗ trợ luồng dữ liệu một chiều, nghĩa là dữ liệu chỉ có thể truyền từ các thành phần cấp cao nhất sang các thành phần cấp thấp hơn. Nhưng với các sự kiện, bạn có thể lắng nghe và phản ứng với một số sự kiện nhất định ở mọi cấp độ thành phần

Bài viết này sẽ đề cập đến cách chúng ta có thể tạo và sử dụng các sự kiện tùy chỉnh trong React

nội dung

Sự kiện tùy chỉnh là gì?

Trình duyệt có sẵn một số sự kiện mặc định cho các phần tử HTML khác nhau. Nhưng sau đó, trong một số trường hợp, nhu cầu tạo sự kiện tùy chỉnh phát sinh. Ví dụ: nếu bạn muốn giao tiếp với một thành phần khác khi một thành phần hộp thoại đã bị đóng, thì cách tốt nhất để đạt được điều đó là thông qua một sự kiện tùy chỉnh, vì không có sự kiện “onDialogClose” nào trong trình duyệt

Chúng ta có thể tạo các sự kiện tùy chỉnh bằng hàm tạo Sự kiện. Bây giờ chúng ta cuối cùng cũng có thể tạo sự kiện “onDialogClose” không tồn tại của mình như vậy

//First, we initialize our event
const event = new Event('onDialogClose');

// Next, we dispatch the event.
elem.dispatchEvent(event);

Nếu chúng tôi muốn thêm một chút dữ liệu vào sự kiện tùy chỉnh của mình, chúng tôi có thể làm như vậy thông qua giao diện CustomEvent bằng cách sử dụng thuộc tính

//First, we initialize our event
const event = new CustomEvent('onDialogClose', {detail: "Main Dialog"});

// Next, we dispatch the event.
elem.dispatchEvent(event);

0

//First, we initialize our event
const event = new CustomEvent('onDialogClose', {detail: "Main Dialog"});

// Next, we dispatch the event.
elem.dispatchEvent(event);

Hãy xem phần này để tìm hiểu thêm về các sự kiện tùy chỉnh trong JavaScript và cách triển khai chúng trong các dự án JavaScript cơ bản của bạn

Sự kiện tùy chỉnh trong React

Đối với bài viết này, chúng tôi sẽ xây dựng một bản trình diễn để minh họa cách sử dụng các sự kiện tùy chỉnh trong các ứng dụng React của chúng tôi

Đối với bản demo, trường hợp sử dụng của chúng tôi sẽ cố gắng hiển thị và ẩn danh sách các quốc gia châu Phi, danh sách này sẽ được chứa là một thành phần

//First, we initialize our event
const event = new CustomEvent('onDialogClose', {detail: "Main Dialog"});

// Next, we dispatch the event.
elem.dispatchEvent(event);

1 và được khai báo trong thành phần chính của ứng dụng của chúng tôi là

//First, we initialize our event
const event = new CustomEvent('onDialogClose', {detail: "Main Dialog"});

// Next, we dispatch the event.
elem.dispatchEvent(event);

2 khỏi một thành phần con khác,

//First, we initialize our event
const event = new CustomEvent('onDialogClose', {detail: "Main Dialog"});

// Next, we dispatch the event.
elem.dispatchEvent(event);

3

Để tìm nạp danh sách các quốc gia châu Phi, chúng tôi sẽ sử dụng

Hãy đi sâu vào

Thiết lập dự án

Trước hết, chúng ta sẽ tạo một dự án React mới bằng cách sử dụng Tạo ứng dụng React
Tiếp theo, chúng tôi sẽ tạo một thư mục

//First, we initialize our event
const event = new CustomEvent('onDialogClose', {detail: "Main Dialog"});

// Next, we dispatch the event.
elem.dispatchEvent(event);

4 trong thư mục

//First, we initialize our event
const event = new CustomEvent('onDialogClose', {detail: "Main Dialog"});

// Next, we dispatch the event.
elem.dispatchEvent(event);

5 và tạo các thành phần của chúng tôi

//First, we initialize our event
const event = new CustomEvent('onDialogClose', {detail: "Main Dialog"});

// Next, we dispatch the event.
elem.dispatchEvent(event);

1 và

//First, we initialize our event
const event = new CustomEvent('onDialogClose', {detail: "Main Dialog"});

// Next, we dispatch the event.
elem.dispatchEvent(event);

3 bên trong thư mục đó

---

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

---

Thành phần

//First, we initialize our event
const event = new CustomEvent('onDialogClose', {detail: "Main Dialog"});

// Next, we dispatch the event.
elem.dispatchEvent(event);

1 sẽ hiển thị danh sách tất cả các quốc gia ở Châu Phi từ điểm cuối API của chúng tôi và thành phần

//First, we initialize our event
const event = new CustomEvent('onDialogClose', {detail: "Main Dialog"});

// Next, we dispatch the event.
elem.dispatchEvent(event);

3 sẽ chứa các nút sẽ hiển thị hoặc ẩn danh sách, tùy thuộc vào trạng thái hiện tại của nó

Ngoài ra, trong thư mục gốc của thư mục

//First, we initialize our event
const event = new CustomEvent('onDialogClose', {detail: "Main Dialog"});

// Next, we dispatch the event.
elem.dispatchEvent(event);

5 của chúng tôi, chúng tôi sẽ tạo một tệp

//events.js

function subscribe(eventName, listener) {
  document.addEventListener(eventName, listener);
}

function unsubscribe(eventName, listener) {
  document.removeEventListener(eventName, listener);
}

function publish(eventName, data) {
  const event = new CustomEvent(eventName, { detail: data });
  document.dispatchEvent(event);
}

export { publish, subscribe, unsubscribe};

1 để tóm tắt mã để gửi và nghe các sự kiện, vì vậy mã của chúng tôi sạch hơn một chút và có thể tái sử dụng

Xây dựng sự kiện tùy chỉnh trong React

Khi bạn đã hoàn thành các hướng dẫn ở trên, hãy tiếp tục sao chép và dán vào trình chỉnh sửa mã của bạn nội dung của các khối mã bên dưới. Đừng lo lắng, chúng tôi sẽ xem xét mọi thứ một cách chi tiết
Đầu tiên, tệp

//events.js

function subscribe(eventName, listener) {
  document.addEventListener(eventName, listener);
}

function unsubscribe(eventName, listener) {
  document.removeEventListener(eventName, listener);
}

function publish(eventName, data) {
  const event = new CustomEvent(eventName, { detail: data });
  document.dispatchEvent(event);
}

export { publish, subscribe, unsubscribe};

2

//events.js

function subscribe(eventName, listener) {
  document.addEventListener(eventName, listener);
}

function unsubscribe(eventName, listener) {
  document.removeEventListener(eventName, listener);
}

function publish(eventName, data) {
  const event = new CustomEvent(eventName, { detail: data });
  document.dispatchEvent(event);
}

export { publish, subscribe, unsubscribe};

Trong tệp

//events.js

function subscribe(eventName, listener) {
  document.addEventListener(eventName, listener);
}

function unsubscribe(eventName, listener) {
  document.removeEventListener(eventName, listener);
}

function publish(eventName, data) {
  const event = new CustomEvent(eventName, { detail: data });
  document.dispatchEvent(event);
}

export { publish, subscribe, unsubscribe};

2, như đã nêu trước đó, chúng tôi chỉ trừu tượng hóa logic để tạo sự kiện tùy chỉnh, gửi sự kiện, thêm trình xử lý sự kiện và xóa trình xử lý sự kiện để sử dụng trong các thành phần khác của ứng dụng của chúng tôi

N. B. , Bạn có thể đổi tên các tên chức năng ở đây thành bất cứ thứ gì bạn thích, tôi chỉ nghĩ rằng mẫu đặt tên này hoạt động tốt với mẫu nhà xuất bản-người đăng ký

Tiếp theo là thành phần

//First, we initialize our event
const event = new CustomEvent('onDialogClose', {detail: "Main Dialog"});

// Next, we dispatch the event.
elem.dispatchEvent(event);

1

//CountryList.js

const CountryList = (props) => {
    return (
        

            
List of countries in Africa
            {props.listData.map((el) => {
                return (
                    

                        
                          
Thử nghiệm các sự kiện tùy chỉnh
Chạy thử nghiệm là một phần của vòng đời phát triển phần mềm, vì vậy, hãy viết một số thử nghiệm đơn vị để đảm bảo các sự kiện tùy chỉnh của chúng tôi đang hoạt động như mong đợi
Chúng tôi sẽ cần một khung thử nghiệm như Jest để thực hiện các bài kiểm tra đơn vị trong React. May mắn thay, khi sử dụng lệnh 
import { publish } from "../events"
const ListControl = (props) => {
  const showList = () => {
    publish('showList');
  }
  const hideList = () => {
    publish('hideList');
  }
  return (
    

      { 
        props.listState ? Hide List :
        Show List
       }
    
  );
}
export default ListControl;
/pre>
5, Jest đi kèm với ứng dụng kết quả, vì vậy chúng tôi không cần thực hiện bất kỳ cấu hình bổ sung nào



Tìm hiểu sâu về cách thức hoạt động của Jest nằm ngoài phạm vi của bài viết này, nhưng nếu bạn muốn tìm hiểu thêm về Jest, hãy xem hướng dẫn này
Bây giờ, hãy tạo tệp thử nghiệm trong thư mục 
//First, we initialize our event
const event = new CustomEvent('onDialogClose', {detail: "Main Dialog"});

// Next, we dispatch the event.
elem.dispatchEvent(event);
5 và đặt tên là 
import { publish } from "../events"
const ListControl = (props) => {
  const showList = () => {
    publish('showList');
  }
  const hideList = () => {
    publish('hideList');
  }
  return (
    

      { 
        props.listState ? Hide List :
        Show List
       }
    
  );
}
export default ListControl;
/pre>
7. Thêm mã dưới đây vào tập tin
//import the event.js file
import { publish, subscribe, unsubscribe } from "./events";
//test the subscribe function
test("subscribe", () => {
    const listener = jest.fn();
    subscribe("test", listener);
    publish("test", "test data");
    expect(listener).toHaveBeenCalledWith(
        expect.objectContaining({
            type: "test",
            detail: "test data",
        })
    );
});
//test the unsubscribe function
test("unsubscribe", () => {
    const listener = jest.fn();
    subscribe("test", listener);
    unsubscribe("test", listener);
    publish("test", "test data");
    expect(listener).not.toHaveBeenCalled();
});
//test the publish function
test("publish", () => {
    const listener = jest.fn();
    subscribe("test", listener);
    publish("test", "test data");
    expect(listener).toHaveBeenCalledWith(
        expect.objectContaining({
            type: "test",
            detail: "test data",
        })
    );
});
Để xác nhận rằng các bài kiểm tra của chúng tôi đã kiểm tra, hãy chạy lệnh 
import { publish } from "../events"
const ListControl = (props) => {
  const showList = () => {
    publish('showList');
  }
  const hideList = () => {
    publish('hideList');
  }
  return (
    

      { 
        props.listState ? Hide List :
        Show List
       }
    
  );
}
export default ListControl;
/pre>
8 trong thiết bị đầu cuối
Đầu ra của thiết bị đầu cuối cho thấy rằng cả ba bài kiểm tra đều được thông qua. Điều này có nghĩa là chức năng của chúng tôi hoạt động như dự định
Phần kết luận
Trong bài viết này, chúng ta đã tìm hiểu về các sự kiện và sự kiện tùy chỉnh trong vanilla JavaScript. Chúng ta cũng đã thảo luận về cách triển khai cùng một mẫu bên trong ứng dụng React và cách gửi, đăng ký và viết bài kiểm tra đơn vị cho các sự kiện tùy chỉnh của chúng ta
Tất cả mã cho hướng dẫn này được lưu trữ trên GitHub tại đây. Vui lòng rẽ nhánh nó và chơi với mã, và nếu bạn thích hướng dẫn này, vui lòng cho nó một ngôi sao
Ngoài ra, hãy để lại suy nghĩ của bạn trong phần bình luận bên dưới
Đăng NhậpTên Lửa. Khả năng hiển thị đầy đủ vào các ứng dụng React sản xuất của bạn
Gỡ lỗi ứng dụng React có thể khó khăn, đặc biệt khi người dùng gặp sự cố khó tái tạo. Nếu bạn quan tâm đến việc giám sát và theo dõi trạng thái Redux, tự động hiển thị các lỗi JavaScript và theo dõi các yêu cầu mạng chậm và thời gian tải thành phần, hãy thử LogRocket. 
 
LogRocket kết hợp tính năng phát lại phiên, phân tích sản phẩm và theo dõi lỗi – trao quyền cho các nhóm phần mềm để tạo trải nghiệm sản phẩm di động và web lý tưởng. Điều đó có ý nghĩa gì đối với bạn?
Thay vì đoán tại sao xảy ra lỗi hoặc yêu cầu người dùng chụp ảnh màn hình và kết xuất nhật ký, LogRocket cho phép bạn phát lại các sự cố như thể chúng đã xảy ra trong trình duyệt của chính bạn để nhanh chóng hiểu điều gì đã xảy ra.
Không còn cảnh báo ồn ào. Theo dõi lỗi thông minh cho phép bạn phân loại và phân loại các vấn đề, sau đó học hỏi từ điều này. Nhận thông báo về các sự cố có ảnh hưởng đến người dùng, không phải thông báo sai. Ít cảnh báo hơn, nhiều tín hiệu hữu ích hơn
Gói phần mềm trung gian LogRocket Redux thêm một lớp khả năng hiển thị bổ sung vào các phiên người dùng của bạn. LogRocket ghi lại tất cả các hành động và trạng thái từ các cửa hàng Redux của bạn
 

JavaScript xử lý các sự kiện như thế nào?
Tương tác của JavaScript với HTML được xử lý thông qua các sự kiện xảy ra khi người dùng hoặc trình duyệt thao tác trên trang . Khi trang tải, nó được gọi là một sự kiện. Khi người dùng nhấp vào một nút, lần nhấp đó cũng là một sự kiện. Các ví dụ khác bao gồm các sự kiện như nhấn phím bất kỳ, đóng cửa sổ, thay đổi kích thước cửa sổ, v.v. 
Sự kiện React JS là gì?
Một sự kiện là một hành động có thể được kích hoạt do hành động của người dùng hoặc sự kiện do hệ thống tạo ra . Ví dụ: nhấp chuột, tải trang web, nhấn phím, thay đổi kích thước cửa sổ và các tương tác khác được gọi là sự kiện. 
Làm cách nào bạn có thể liên kết các sự kiện trong React JS?
Có năm cách khác nhau để liên kết từ khóa 'this' với trình xử lý sự kiện, được liệt kê bên dưới.  . 
 
Ràng buộc bên trong hàm tạo. . 
 
Liên kết bằng cách chuyển chức năng mũi tên bên trong trình xử lý sự kiện. . 
 
Ràng buộc trực tiếp khi chuyển chức năng. . 
 
Liên kết với sự trợ giúp của chức năng mũi tên. . 
 
Sử dụng thành phần chức năng với chức năng mũi tên
 
Làm cách nào để gọi sự kiện trong JavaScript?
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.