document.createEvent() — створення події вручну в JS

Загальний опис

Метод createEvent() в об'єктній моделі документа (DOM) JavaScript відіграє важливу роль у створенні, ініціалізації та запуску користувацьких подій, що дозволяє розробникам симулювати дії користувачів або системні події. Цей метод надає можливість програмно створювати складні взаємодії в рамках веб-додатків, сприяючи створенню гнучких та інтерактивних рішень. Основна корисність createEvent() полягає в його здатності до точного моделювання поведінки користувача та системних процесів, що відкриває широкі можливості для тестування та інтерактивності без прямої участі користувача.

Щоб використати createEvent(), спочатку потрібно викликати цей метод на об'єкті document, вказуючи тип події, яку бажаєте створити. На сьогодні, з огляду на розвиток стандартів, частіше рекомендується використовувати більш нові API для створення подій, такі як конструктори Event, CustomEvent або специфічні для подій конструктори типу MouseEvent, KeyboardEvent тощо, оскільки createEvent() вважається застарілим. Проте, розуміння роботи createEvent() є важливим для сумісності з існуючим кодом та розуміння еволюції API подій в JavaScript.

Після створення об'єкта події за допомогою createEvent(), наступним кроком є його ініціалізація з використанням методів, таких як initEvent(), де вказуються деталі події, наприклад, чи є подія спливаючою. Нарешті, застосовується метод dispatchEvent() на елементі, до якого має бути застосована подія, для її "відправлення" або активації.

Розглянемо приклад створення та відправлення користувацької події:

// Старий спосіб створення події
var event = document.createEvent('Event');

// Ініціалізація події
event.initEvent('build', true, true);

// Слухач для події 'build'
document.addEventListener('build', function (e) {
    // логіка обробки події
    console.log('Подія "build" була активована');
}, false);

// Відправлення події
document.dispatchEvent(event);

У цьому прикладі створюється подія build, ініціалізується з можливістю спливання та перехоплення, і потім відправляється, активуючи слухач подій, доданий до document.

Хоча метод createEvent() та пов'язані з ним методи для ініціалізації подій (initEvent()) зараз вважаються застарілими на користь більш сучасних підходів, вони досі можуть зустрічатися в існуючому коді. Розуміння цих методів є корисним для підтримки сумісності та рефакторингу старого коду. На сьогодні рекомендується використовувати більш сучасні API, такі як new Event(), new CustomEvent() для створення та відправлення подій, що забезпечує більшу гнучкість та контроль над процесом взаємодії з подіями в JavaScript.

правити

Порада

Після створення об'єкта події за допомогою createEvent(), вам необхідно ініціалізувати його викликом відповідного методу ініціалізації, такого як initEvent(), initMouseEvent() або інші, залежно від типу створеної події. Цей крок дозволяє встановити деталі події, такі як стан клавіш, положення миші тощо.

автор: Bond правити

Порада

Використовуйте метод dispatchEvent() на елементі, до якого ви хочете прив'язати створену подію, щоб спровокувати її. Це дозволяє імітувати користувацькі дії, як-от кліки миші або натискання клавіш, що може бути корисним для тестування ваших веб-додатків.

автор: Bond правити

Порада

Зверніть увагу, що в сучасному JavaScript рекомендується використовувати конструктори подій, такі як new MouseEvent(), new KeyboardEvent() тощо, для створення подій замість createEvent(), оскільки це старіший метод і може бути не підтриманий у майбутніх версіях. Однак, знання про createEvent() залишається корисним для розуміння базових принципів роботи з подіями в JavaScript.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

createEvent(type)

Параметри

type

Рядок, що представляє тип події, яку потрібно створити. Можливі типи подій включають UIEvents, MouseEvents, MutationEvents та HTMLEvents. Дивіться розділ Примітки для отримання детальної інформації.

автор: Bond

правити

Повернення

event

Повертає об'єкт Event, який представляє новостворену подію заданого типу. Цей об'єкт може бути подальше налаштований за допомогою методів ініціалізації, таких як initEvent(), перед тим як буде відправлений до цільового елемента за допомогою методу dispatchEvent().

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	7	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

// Створення нової події
var event = document.createEvent('Event');

// Ініціалізація події з типом 'build'
event.initEvent('build', true, true);

// Призначення обробника події для document
document.addEventListener('build', function (e) {
  console.log('Подія "build" була відправлена та прийнята!');
}, false);

// Відправлення події
document.dispatchEvent(event);

// Створення нової події з додатковими даними
var customEvent = new CustomEvent('customEvent', {
  detail: { message: 'Це повідомлення передано через подію!' }
});

// Призначення обробника події для document
document.addEventListener('customEvent', function (e) {
  console.log(e.detail.message); // Виведення додаткових даних з події
}, false);

// Відправлення події
document.dispatchEvent(customEvent);

<header>
  <h2 class="title">document.createEvent()</h2>
  <p class="description">Створює новий подійний об'єкт, який може бути налаштований та відправлений.</p>
</header>
<main>
  <button id="triggerEventBtn">Відправити подію</button>
  <div class="result" id="eventResult">
    <p>Слідкуйте за зміною тексту після відправлення події.</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  cursor: pointer;
  padding: 10px 20px;
  margin-bottom: 20px;
  font-size: 14px;
}

document.getElementById('triggerEventBtn').addEventListener('click', function () {
  // Створення події
  var event = document.createEvent('HTMLEvents');
  event.initEvent('customEvent', true, false);

  // Призначення обробника події для 'result' елемента
  document.getElementById('eventResult').addEventListener('customEvent', function () {
    this.innerHTML = '<p>Текст змінено завдяки відправленій події!</p>';
  });

  // Відправлення події
  document.getElementById('eventResult').dispatchEvent(event);
});
//# sourceURL=pen.js