Пользовательские события JavaScript

Опубликовано: 26 Августа, 2022

События используются почти в каждом веб-приложении, например, событие onclick используется для выполнения некоторого кода, когда пользователь что-то щелкает. Уже существует множество встроенных событий, доступных для использования, но что, если нам нужно собственное пользовательское событие? Предположим, мы создаем приложение чата и хотим выполнять некоторый код, когда конечный пользователь отправляет какое-то сообщение. Нет встроенного события для обнаружения этого. Здесь нам нужно пользовательское событие, которое может обрабатывать такие пользовательские сценарии.

Создание пользовательского события. Чтобы создать пользовательское событие, мы используем конструктор событий или интерфейс CustomEvent . Конструктор событий создает событие, а CustomEvent создает событие с большей функциональностью.

Следующие шаги выполняются, чтобы создать его с помощью нового Event .

Мы создаем событие с помощью конструктора событий.
Мы слушаем это событие, используя метод addEventListener() .
Мы запускаем или отправляем событие с помощью метода element.dispatchEvent(eventName) .
Пользовательское событие с именем start теперь создано.

Синтаксис:

// To assign event
const startEvent = new Event("start");

// To trigger the event Listener
document.addEventListener("start", () => {
    console.log("The start event was triggered")
});

// To trigger the Event
document.dispatchEvent(startEvent);

Пример: в этом примере мы создаем событие, которое запускается, когда значение x равно 5.

Выход:

"Start event triggered"

Создание настраиваемого события с помощью CustomEvent. Создание настраиваемых событий с использованием интерфейса CustomEvent имеет преимущество, поскольку оно может отправлять настраиваемые данные. Следующие шаги выполняются для создания нового CustomEvent.

Мы создаем пользовательское событие с помощью конструктора CustomEvent.
Он принимает два аргумента, первый — это имя события, а второй — объект, содержащий данные. Имя свойства внутри имени объекта должно называться деталью , иначе оно не будет работать.
Мы создаем прослушиватель для этого события.
Мы инициируем или отправляем событие.
Создано пользовательское событие, содержащее данные.

Синтаксис:

// To assign event
const event = new CustomEvent("start", {
      detail: {
        platform : "GeeksforGeeks"
      }
});

// To trigger the event Listener
document.addEventListener("start", (e)=>{
      console.log(
        `start event triggered on platform :
        ${e.detail.platform}`
        );
});

// To trigger the Event
document.dispatchEvent(event);

Пример 2. В этом примере мы создаем пользовательское событие, которое срабатывает, когда значение x равно 5.

Выход:

Start event triggered on platform GeeksforGeeks

Примечание. Мы отправляем событие непосредственно из документа, используя document.dispatchEvent('start') , но можно отправить событие из любого необходимого элемента, например myBtn.dispatchEvent('start') .

JavaScript

Пользовательские события JavaScript

РЕКОМЕНДУЕМЫЕ СТАТЬИ