データ付きイベントをディスパッチする 質問する

データ付きイベントをディスパッチする 質問する

そのイベントをリッスンするイベント リスナーに何らかのデータを渡すイベントをディスパッチしたいと思います。

イベントを発生させる関数を考えてみましょう:

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

click()

イベント リスナーにカスタム データを渡すにはどうすればよいですか?

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

ベストアンサー1

おそらくあなたが探しているのはevent.detail

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

データの代わりにxを使用し、イベントリスナーではevent.detailを使用してxにアクセスできます。

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);
});

おすすめ記事