jQueryのカスタムイベントをバニラJSで受け取る

jQueryのtrigger()とかで発火するカスタムイベントを、バニラJSでどうやって受け取るのかというやりかたのメモ。
(jQuery3.2.1で検証)

$('#hoge').trigger('fugaPiyo', {foo: 'bar'});

onloadとかonclickと同じく、on～というプロパティに関数を代入すればよろし。
ただし、onのあとに続くイベント名は小文字始まりのローワーキャメルケースであることに注意。

<div id="hoge">hoge</div>

document.getElementById('hoge')
.onfugaPiyo = function(e, params) {
    console.log(this);      // Element
    console.log(e);         // jQueryEvent
    console.log(params);    // {foo: "bar"}
};

$('#hoge').trigger('fugaPiyo', {foo: 'bar'});

渡されるイベントオブジェクトはjQueryEventであることも注意。

ちなみに下記のようなaddEventListener()を使った方法は使えない模様。

document.getElementById('hoge')
.addEventListener('fugaPiyo', function(e, params) {
    // any
});