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

Эта статья демонстрирует, как создавать и вызывать пользовательские 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");
  }
}

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

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
Event() constructorChrome Полная поддержка 15Edge Полная поддержка ДаFirefox Полная поддержка 11IE Нет поддержки НетOpera Полная поддержка 11.6Safari Полная поддержка 6WebView Android Полная поддержка ДаChrome Android Полная поддержка 18Firefox Android Полная поддержка 14Opera Android Полная поддержка 12Safari iOS Полная поддержка 6Samsung Internet Android ?

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Совместимость неизвестна  
Совместимость неизвестна

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