[JavaScript]カスタムイベント

昨日、jQuery Notebookを試してみて、少しプログラムを見ていたのですが、

var contentArea = $('#jquery-notebook-content-' + $(this).attr('data-jquery-notebook-id'));
contentArea.val($(this).html());
var content = contentArea.val();
var changeEvent = new CustomEvent('contentChange', { 'detail': { 'content' : content }});
this.dispatchEvent(changeEvent);

と「new CustomEvent」と記載されていて、これは何なのかなーっと思って調査しました。

MDNのCustomEventの詳細がありました。

言葉通りなのですが、カスタムイベントを発行できるようです。

var obj = document.getElementById('hoge');
obj.addEventListener('cat', function(e) {
  console.log(e)
});

var event = new CustomEvent("cat", {"detail":{"bar":true}});
obj.dispatchEvent(event);

上の場合、console.logにe.detail.barでBoolを確認することができる。

普段、カスタムイベントもjQueryを使っているので、ネイティブにもあることが気がつかなかった。

ちなみに、当然のごとく、IEは対応していないっぽい。