Отправка события с данными

Я хотел бы отправить событие, которое передаст некоторые данные любым прослушивателям событий, которые прослушивают это событие.

Рассмотрим функцию, которая запускает событие:

function click() {
  const x = 'foo'
  document.dispatchEvent(new CustomEvent('clicked'))
}

click()

Как я могу передать пользовательские данные прослушивателю событий?

document.addEventListener('clicked', function(e) {
  console.log(x) // logs "foo"
})

javascript events custom-events
person nicholaswmin    schedule 18.05.2014    source источник

Ответы (2)


arrow_upward
103
arrow_downward

Возможно, вы ищете event.detail

new CustomEvent('eventName', {'detail': data})

Вместо данных используйте x, а в прослушивателе событий вы можете получить доступ к x, используя event.detail

function getSelectionBounds() {
  var x = (bounds["x"].toFixed(2));
  var y = "xyz";
  var selectionFired = new CustomEvent("selectionFired", {
    "detail": {"x":x,"y":y }
  });

  document.dispatchEvent(selectionFired);
};

document.addEventListener("selectionFired", function (e) {
  alert(e.detail.x+"   "+e.detail.y);
});
person adnan kamili    schedule 18.05.2014
comment
@NicholasKyriakides это происходит во всех браузерах, не могли бы вы обновить свой код, используя то, что я предложил, или создать скрипку? - person adnan kamili; 19.05.2014
comment
@NicholasKyriakides, что отображается в моем обновленном коде. - person adnan kamili; 19.05.2014
comment
@NicholasKyriakides проверьте мой обновленный ответ на наличие нескольких переменных - person adnan kamili; 19.05.2014
comment
Я думаю, вы забыли } подробно, но в остальном это работает как шарм. Еще раз большое спасибо - person nicholaswmin; 19.05.2014

arrow_upward
9
arrow_downward

К сожалению, CustomEvent не работает в IE (до Edge), но вы можете просто использовать обычный Event.

Просто учтите, что Event также является объектом, поэтому вы можете добавить все необходимые настраиваемые атрибуты:

 event.X = "foo";

Таким образом, вы можете проверить свое пользовательское поле в функции обратного вызова, подключенной к событию.


NB. Для старой версии IE вам нужен этот полифилл для new Event пропущенной функции:

var event;
if(typeof(Event) === 'function') {
  event = new Event(EVENT_NAME);
}else{
  event = document.createEvent('Event');
  event.initEvent(EVENT_NAME, false, false);
}
person Andrea Savojardo    schedule 24.07.2018