Что делать, если возникнут какие-то требования, требующие создания настраиваемых событий, выполняющих определенные операции.
Чтобы создать событие, вы начинаете с использования синтаксиса;
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>
Итак, это был весь процесс создания пользовательских обработчиков событий. Надеюсь, у вас есть идея.