web-dev-qa-db-ja.com

Javascriptでカスタムイベントクラスを作成するにはどうすればよいですか？

ActionScriptに似たカスタムイベントクラスを作成するにはどうすればよいですか？つまり、自分のイベントを発生させ、必要なデータを送信するために使用できるクラスです。

YUIやjQueryなどのサードパーティライブラリを使用したくありません。私の目標は、このようなイベントを送信できるようにすることです。

document.addEventListener("customEvent", eventHandler, false);

function eventHandler(e){
    alert(e.para1);
}

document.dispatchEvent(new CustomEvent("customEvent", para1, para2));

サードパーティのライブラリソリューションは使用しないでください。

javascriptactionscript-3eventsjavascript-eventsevent-handling
28
Josua Pedersen

私のために働いたメソッドは、document.createEvent（）を呼び出し、それを初期化し、window.dispatchEvent（）でディスパッチすることでした。

  var event = document.createEvent("Event");
  event.initEvent("customEvent", true, true);
  event.customData = getYourCustomData();
  window.dispatchEvent(event);
26
pfleidi

私はここでのパーティーに少し遅れていますが、同じことを探していました。カスタムイベントを管理するためにドキュメントに依存しているため、最初の回答（上記）には熱心ではありません。これはグローバルであり、別のスクリプトが偶然に同じカスタムイベントに依存している場合、そのスクリプトと競合する可能性があるため、危険です。

私が見つけた最良の解決策はここにあります： Nicholas C. Zakas-Javascriptのカスタムイベント

残念ながら、javascriptは継承キーワードをサポートしていないため、プロトタイピングが少し面倒ですが、確実に整理されています。

5
Rich Hauck

これは、DOM要素を使用してイベントを仲介する場合は簡単です。

与えられた要素：

var element = document.querySelector('div#rocket');

クライアントがサブスクライブする場合：

element.addEventListener('liftoff', function(e)
{
    console.log('We have liftoff!');
});

次に、イベントをディスパッチ/発生/発生させるには、次のコードを使用します。

element.dispatch(new Event('liftoff'));
1
Drew Noakes