В мире фронтенд-разработки часто используются JavaScript и HTML.мероприятиедля достижения взаимодействия. Большинство из них являются встроенными событиями, эта статья в основном знакомит с JS.Концепция и реализация индивидуального мероприятия, а также подробно анализирует принципы, функции, области применения и меры предосторожности пользовательских событий с помощью тематических исследований.

📚1. Что такое заказное событие

В ежедневной разработке мы привыкли отслеживать множество событий на странице, таких как: события кликов (click), события движения мыши (mousemove), событие потери фокуса элементом (blur)так далее.

Суть события - это способ связи и сообщение, только при наличии нескольких объектов и нескольких модулей можно использовать события для связи. В многомодульной разработке вы можете использоватьпользовательское событиеДля межмодульной связи.

Когда некоторые основные события не могут соответствовать нашему бизнесу, мы можем попробоватьпользовательское событиерешать.

📚 Во-вторых, введение метода реализации

В настоящее время реализованопользовательское событиеДва основных способа — нативные JS.Event()конструктор иCustomEvent()конструктор для создания.

1. Event()

Event()Конструктор, который создает новый объект событияEvent.

1.1 Синтаксис

let myEvent = new Event(typeArg, eventInit);

1.2 Параметр

typeArg:DOMStringВведите, указав название создаваемого события;
eventInit: необязательные элементы конфигурации, в том числе:

Имя поля	иллюстрировать	Это необязательно	Типы	По умолчанию
bubbles	указать событиеЭто пузырится.	необязательный	Boolean	false
cancelable	указать событиеМожно ли отменить.	необязательный	Boolean	false
composed	Указывает, будет ли событиеза пределами теневого корневого узла DOMЗапустите слушателя.	необязательный	Boolean	false

1.3 Демонстрационный пример

// 创建一个支持冒泡且不能被取消的 pingan 事件
let myEvent = new Event("pingan", {"bubbles":true, "cancelable":false});
document.dispatchEvent(myEvent);

// 事件可以在任何元素触发，不仅仅是document
testDOM.dispatchEvent(myEvent);

1.4 Совместимость

Источник изображения:caniuse.com/

2. CustomEvent()

CustomEvent()Конструктор, который создает новый объект событияCustomEvent.

2.1 Синтаксис

let myEvent = new CustomEvent(typeArg, eventInit);

2.2 Параметры

typeArg:DOMStringВведите, указав название создаваемого события;
eventInit: Дополнительные элементы конфигурации, в том числе:

Имя поля	иллюстрировать	Это необязательно	Типы	По умолчанию
detail	Указывает данные, которые необходимо передать в событии, вEventListener Получать.	необязательный	Any	null
bubbles	указать событиеЭто пузырится.	необязательный	Boolean	false
cancelable	указать событиеМожно ли отменить.	необязательный	Boolean	false

2.3 Демонстрационный пример

// 创建事件
let myEvent = new CustomEvent("pingan", {
  detail: { name: "wangpingan" }
});

// 添加适当的事件监听器
window.addEventListener("pingan", e => {
  alert(`pingan事件触发，是 ${e.detail.name} 触发。`);
});
document.getElementById("leo2").addEventListener(
  "click", function () {
    // 派发事件
    window.dispatchEvent(myEvent);
  }
)

Мы также можем добавить свойства к пользовательским событиям:

myEvent.age = 18;

2.4 Совместимость

Источник изображения:caniuse.com/

2.5 Совместимость с IE8

При отправке событий вам нужно использоватьdispatchEventТриггер события, его необходимо использовать в IE8 и нижеfireEventМетод совместим с:

if(window.dispatchEvent) {  
    window.dispatchEvent(myEvent);
} else {
    window.fireEvent(myEvent);
}

3. Разница между Event() и CustomEvent()

Из параметров, поддерживаемых обоими, видно, что:
Event()подходит для создания простых пользовательских событий, в то время какCustomEvent()Пользовательские события, которые поддерживают передачу параметров, поддерживаетdetailпараметр, как в случаеданные для передачи, И вEventListenerПолучать.

Уведомление:
Когда событие инициируется, если соответствующий элемент и его родительские элементы не имеют мониторинга событий, никакая операция обратного вызова не будет выполняться. 
Когда вам нужно отслеживать дочерние элементы, вы можете размещать события в их родительских элементах, чтобы события перехватывались и выполнялись прослушивателем на этапе всплытия событий. можно использовать в это времяevent.targetПолучите элемент, который запускает событие.

📚В-третьих, сценарии использования

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

1. Вступительная сцена

Например, эти два сценария:

• Сценарий 1: изменяется один целевой объект, и необходимо уведомить несколько наблюдателей, чтобы изменить их вместе.

Например: когда вы нажмете «Подписаться» в списке Weibo, одновременно произойдет много вещей: порекомендуйте больше похожих Weibo, увеличьте количество личных подписчиков...

• Сценарий 2: разделение нескольких модулей для совместной работы.

Например: Сяо Ван отвечает за разработку модуля A, Сяо Чен отвечает за разработку модуля B, а модуль B может быть выполнен только после того, как модуль A заработает нормально.

2. Реализация кода

2.1 Реализация сценария 1

Сценарий 1: изменяется один целевой объект, и необходимо уведомить несколько наблюдателей, чтобы изменить их вместе.
Этот пример моделирует три страницы для демонстрации:
1. Страница списка Weibo (Weibo.js)
2. Страница со списком поклонников (User.js)
3. Домашняя страница Weibo (Home.js)

На **странице списка Weibo (Weibo.js)** мы импортируем две другие страницы и отслеживаем событие нажатия кнопки [Follow Weibo] и создаем пользовательское событие в событии обратного вызова.focusUser, И вdocumentиспользовать наdispatchEventметод для отправки пользовательских событий.

// Weibo.js
import UserModule from "./User.js";
import HomeModule from "./Home.js";
const eventButton = document.getElementById("eventButton");
eventButton.addEventListener("click", event => {
	const focusUser = new Event("focusUser");
  document.dispatchEvent(focusUser);
})

Код, реализованный на следующих двух страницах, в основном одинаков, для удобства наблюдения для них установлены разные журналы вывода.

// User.js
const eventButton = document.getElementById("eventButton");
document.addEventListener("focusUser", event => {
    console.log("【粉丝列表页】监听到自定义事件触发，event：",event);
})

// Home.js
const eventButton = document.getElementById("eventButton");
document.addEventListener("focusUser", event => {
    console.log("【微博首页】监听到自定义事件触发，event：",event);
})

После нажатия кнопки [Follow Weibo] вы увидите следующую информацию журнала, выводимую из консоли:

В конце концов выяснилось, что компонент **страницы списка Weibo (Weibo.js)** отвечает за отправку событий, а другие компоненты отвечают за мониторинг событий. Таким образом, связь между тремя компонентами очень низкая. , и нет никакой связи между собой и не влияют друг на друга.
Фактически, это также реализует шаблон наблюдателя.

2.2 Реализация сценария 2

Сценарий 2: разделение нескольких модулей для совместной работы.
Чтобы привести более наглядный пример, когда Weibo нужно добавить [Одна кнопка три ссылки】Новые функции, которые программисты могут разрабатывать после завершения прототипа продукта и дизайна пользовательского интерфейса.
Этот пример имитирует четыре модуля:
1. Управление потоком (Index.js)
2. Дизайн продукта (Production.js)
3. Дизайн пользовательского интерфейса (Design.js)
4. Разработка программиста (Development.js)

существуетМодуль управления потоком (Index.js), нам нужно импортировать модули остальных трех процессов, затем отслеживать событие нажатия кнопки [Начать задачу] и создать пользовательское событие в событии обратного вызоваstartTask, И вdocumentиспользовать наdispatchEventметод для отправки пользовательских событий.

// Index.js
import ProductionModule from "./Production.js";
import DesignModule from "./Design.js";
import DevelopModule from "./Develop.js";

const start = document.getElementById("start");
start.addEventListener("click", event => {
    console.log("开始执行任务")
    const startTask = new Event("startTask");
    document.dispatchEvent(startTask);
})

В модуле «Проектирование продукта производства» отслеживайте событие запуска задачи.startTaskПосле завершения моделирования в течение 1 секунды проектирование прототипа завершается и отправляется новое событие.productionSuccess, начните следующий проект пользовательского интерфейса.

// Production.js
document.addEventListener("startTask", () => {
    console.log("产品开始设计...");
    setTimeout(() => {
        console.log("产品原型设计完成");
        console.log("--------------");
        document.dispatchEvent(new Event("productionSuccess"));
    }, 1000);
});

В модулях дизайна проекта пользовательского интерфейса и разработки программы это действительно похоже, реализация кода:

// Dedign.js
document.addEventListener("productionSuccess", () => {
    console.log("UI稿开始设计...");
    setTimeout(() => {
        console.log("UI稿设计完成");
        console.log("--------------");
        document.dispatchEvent(new Event("designSuccess"));
    }, 1000);
});

// Production.js
document.addEventListener("designSuccess", function (e) {
    console.log("开始开发功能...");
    setTimeout(function () {
        console.log("【一键三连】开发完成");
    }, 2000)
});

После завершения разработки нажимаем кнопку [Начать задачу] и видим следующий вывод лог-информации из консоли:

наконец понял вМодуль управления потоком (Index.js)Отвечая за диспетчеризацию событий, другие компоненты отвечают за мониторинг событий и выполнение других задач в соответствии с процессом.
Видно, что задачи прототипирования, проектирования пользовательского интерфейса и разработки программы не влияют друг на друга и легко расширяются.

📚Четыре.

Эта статья подробно знакомит с JSКонцепция и реализация индивидуального мероприятия, и в сочетании с двумя реальными сценариями для демонстрации кода. Внимательные друзья обнаружат, что эти два реальных сценария используютсяEvent()Реализация конструктора, конечно, тоже может быть использованаCustomEventвместо этого конструктор.
Кроме того, в этой статье также подробно представлены две реализации, включая их различия и совместимость.
Наконец, я надеюсь, что каждый может больше думать о разделении кода и правильно использовать его в реальной разработке.пользовательское событиедля улучшения качества кода.

📚5. Справочные статьи

• "Функция пользовательского события javascript и анализ примера использования》
• "Event - MDN》
• "CustomEvent - MDN》