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

Чтобы создать событие, вы начинаете с использования синтаксиса;

let event  = new Event(event type[,options]);

тип события - может быть любая строка, которую вы хотите создать, например. «Щелкнуть» и т. Д.

параметры - здесь вы указываете 2 вещи:

. пузырьки: true / false .. Если true, событие пузырится

.cancelable: true / false: если true, действия по умолчанию, возможно, предотвращены

ПО УМОЛЧАНИЮ: оба параметра ложны.

Итак, после того, как объект события был создан, вы должны запустить его в элементе с помощью вызова .. т.е. elem.dispatchEvent(event)

Теперь обработчики реагируют на это как на обычное встроенное событие. Если событие было создано с флагом пузырей, установленным на true, оно пузырится.

Смотрите следующий пример, который компилирует то, что я сказал выше.

<button id="element" onclick="alert('Click!');">Autoclick</button>

<script>
  let event = new Event("click");
  element.dispatchEvent(event);
</script>

Создать всплывающее событие

<h1 id="element">Hello !!!!!!!</h1>
<script>
  document.addEventListener("greetings", function(event) {
    alert("Hello from " + event.target.tagName);
  });
  let event = new Event("greetings", {bubbles: true});
  element.dispatchEvent(event);
</script>

Важное примечание: мы должны использовать addEventListener для наших пользовательских событий, потому что on<event> существует только для встроенных событий, document.ongreetings не работает.

Также для мыши и клавиатуры… Событие мыши, событие колеса, событие фокуса и т. Д. - мы должны использовать. «New MouseEvent» вместо «new Event» ..

ТАМОЖЕННЫЕ СОБЫТИЯ

Для создания любых пользовательских событий:

мы используем «new CustomEvent» вместо. «Новое событие». Это в основном то же самое, что и событие, за одним исключением.

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

<h1 id="elem">Hello Rahul</h1>

<script>
  elem.addEventListener("hello", function(event) {
    alert(event.detail.name);
  });

  elem.dispatchEvent(new CustomEvent("hello", {
    detail: { name: "John" }
  }));
</script>

Итак, это был весь процесс создания пользовательских обработчиков событий. Надеюсь, у вас есть идея.