この記事では、DOM イベントを作成してディスパッチする方法を説明します。このようなイベントは、一般に、ブラウザー自体によって起動されたイベントとは対照的に、合成イベントと呼ばれます。

カスタムイベントを作成する

イベントは、次のように Event コンストラクターを使用して作成できます。

var event = new Event('build');

// Listen for the event.
elem.addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

このコンストラクターは、ほとんどの最新のブラウザーでサポートされています (Internet Explorer は例外です) Internet Explorer で動作させるためには、こちら の方法を参照してください。

カスタムデータの追加 – CustomEvent()

イベントオブジェクトにデータを追加するには、CustomEvent インターフェイスが存在し、detail プロパティを使用してカスタムデータを渡すことができます。

たとえば、イベントは次のように作成できます。

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

これにより、イベントリスナー内の追加データにアクセスすることができます。

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

The old-fashioned way

イベントを作成する古いアプローチでは、Java に触発された API が使用されます。以下に例を示します。

// Create the event.
var event = document.createEvent('Event');

// Define that the event name is 'build'.
event.initEvent('build', true, true);

// Listen for the event.
elem.addEventListener('build', function (e) {
  // e.target matches elem
}, false);

// target can be any Element or other EventTarget.
elem.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) Edge Internet Explorer Opera Safari (WebKit)
Event() コンストラクター 15 11 (有) 11 11.60 6
機能 Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基本サポート ? ? ? ? 6

関連項目

ドキュメントのタグと貢献者

このページの貢献者: unarist, dskmori, ShotaCoffee, y4m4to, lv7777
最終更新者: unarist,