DOM

// カスタムイベントを作成
const catFound = new CustomEvent('animalfound', {
  detail: {
    name: 'cat'
  }
});
const dogFound = new CustomEvent('animalfound', {
  detail: {
    name: 'dog'
  }
});

// 適切なイベントリスナーを追加
obj.addEventListener('animalfound', (e) => console.log(e.detail.name));

// イベントの配信
obj.dispatchEvent(catFound);
obj.dispatchEvent(dogFound);

// "cat" および "dog" がコンソールの出力される

HTML：

<SPAN id=IdTest>[SPAN要素。]</SPAN><BR>
<SPAN id=IdLog></SPAN>

JavaScript：

TE=new CustomEvent('TestEvent', {
  detail:{name:'cat'}
});
function Job(eve){
  D=eve;  //＝[object]：[object CustomEvent]
詳細
	//isTrusted＝[boolean]：false
	//detail＝[object]：[object Object]
	//initCustomEvent＝[function]：function initCustomEvent() { [native code] }
	//type＝[string]：TestEvent
	//target＝[object]：[object HTMLSpanElement]
	//currentTarget＝[object]：null
	//eventPhase＝[number]：0
	//bubbles＝[boolean]：false
	//cancelable＝[boolean]：false
	//defaultPrevented＝[boolean]：false
	//composed＝[boolean]：false
	//…

  IdLog.innerHTML=IdLog.innerHTML +"●";
}
IdTest.addEventListener('TestEvent', Job);
IdTest.dispatchEvent(TE);

イベントの名前は「CustomEvent」となっている。

D.detail は：

//＝[object]：[object Object]
//name＝[string]：cat

一部変更して、

TE=new CustomEvent('TestEvent', {
  detail:1
});

イベント発生で得られた内容は、

//D＝[object]：[object CustomEvent]
詳細
//isTrusted＝[boolean]：false
//detail＝[number]：1
//initCustomEvent＝[function]：function initCustomEvent() { [native code] }
//type＝[string]：TestEvent
//target＝[object]：[object HTMLSpanElement]
//currentTarget＝[object]：null
//eventPhase＝[number]：0
//bubbles＝[boolean]：false
//cancelable＝[boolean]：false
//defaultPrevented＝[boolean]：false
//composed＝[boolean]：false
//…

detail の内容は任意でいいようだ。つまり、イベント処理で利用したい物を指定する。