Эта статья демонстрирует как создавать и вызывать пользовательские DOM-события. Такие события часто называют исскуственными событиями, по отношению к событиям производимым браузером.

Создание собственных событий

События могут быть созданы с помощью  конструктора Event:

var event = new Event('build');

// Подписываемся на событие
elem.addEventListener('build', function (e) { ... }, false);

// Вызываем событие
elem.dispatchEvent(event);

Этот конструктор поддерживается во всех современных браузерах (кроме Internet Explorer). Более подробную информацию смотрите ниже "Старомодный способ".

Добавление пользовательских данных – CustomEvent()

Чтобы добавить больше данных к объекту event, существует интерфейс CustomEvent, и вы можете использовать свойство detail, чтобы передать собственные данные. Например, событие может быть создано так:

var event = new CustomEvent('build', { 'detail': elem.dataset.time });

Это позволит вам получить доступ к дополнительным данным в обработчике:

function eventHandler(e) {
  log('The time is: ' + e.detail);
}

Старомодный способ

Старый способ создать событие использует API в стиле Java. Пример:

// Создание события
var event = document.createEvent('Event');

// Назначить имя событию
event.initEvent('build', true, true);

// Слушаем событие
document.addEventListener('build', function (e) {
  // e.target соотетствует объекту document
}, false);

// target события может быть любой элемент
document.dispatchEvent(event);

Вызов встроенных событий

Этот пример показывает симуляцию клика (программно сгенерированное событие клика) по галочке чекбокса, используя DOM-методы. Просмотр действующих примеров.

function simulateClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('checkbox'); 
  var canceled = !cb.dispatchEvent(event);
  if (canceled) {
    // A handler called preventDefault.
    alert("canceled");
  } else {
    // None of the handlers called preventDefault.
    alert("not canceled");
  }
}

Совместимость с браузерами

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Event() constructor 15 11 Нет 11.60 6
Возможность Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Базовая поддержка ? ? ? ? 6

Смотрите также

Метки документа и участники

Внесли вклад в эту страницу: Solant, bagau, pk.prog, lazyexpert, YuryT
Обновлялась последний раз: Solant,