Почему мои параметры не передаются в отправленное событие?

Хорошо, поэтому я настроил событие listenr как это...

window.addEventListener('message', parseMessage, false);

var parseMessage = function(rawMessage) {
    console.log(rawMessage.cmd);
};

И затем я запускаю событие следующим образом:

var event = new Event('message', {'cmd':"blerg!"});

window.dispatchEvent(event);

Проблема заключается в том, что console.log в синтаксическом анализе выводит undefined, когда я ожидаю выйти из "blerg!"

Что я делаю здесь неправильно с событиями, как передать сообщение "cmd" на событие?

Ответы

Ответ 1

  • Используйте CustomEvent вместо Event для создания настраиваемых событий.

  • Укажите данные в объекте "подробности" (см. код).

  • Я изменил название события, потому что message также используется для postMessage API. Это не вызывало проблем при работе в Chrome, но я бы не использовал его.

 

var parseMessage = function(rawMessage) {
  console.log(rawMessage);
  console.log(rawMessage.detail.cmd);
};

// changed event name
window.addEventListener('myMessage', parseMessage, false);

// data should be in a 'details' object
var evt = new CustomEvent('myMessage', {
    detail: {
      'cmd' : "blerg!"
    }
});

window.dispatchEvent(evt);

Вот настройка для совместимости с IE >= 9 (с помощью document.createEvent() и CustomEvent::initCustomEvent()):

var evt = document.createEvent("CustomEvent");
evt.initCustomEvent('myMessage', false, false, {
    'cmd': "blerg!"
});

Ответ 2

Для IE9/10 polyfill вы можете использовать этот код, предоставленный Mozilla:

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

(function () {
  function CustomEvent ( event, params ) {
    params = params || { bubbles: false, cancelable: false, detail: undefined };
    var evt = document.createEvent( 'CustomEvent' );
    evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
    return evt;
   }

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
})();

Также описано здесь, но с неправильным URL: fooobar.com/info/376146/...