We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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


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

var event = new Event('build');

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

// Dispatch the 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.


この例では、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.
  } 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,