jQueryでなら書けるけど、ネイティブのJavaScriptだと書けない・・・を克服していく記録です。
そもそもの.triggerHandler()の使いどころ
<form id="js-form">
<div>
<label><input type="radio" name="hoge" value="1" checked="checked">hoge１</label>
<label><input type="radio" name="hoge" value="2">hoge2</label>
<label><input type="radio" name="hoge" value="3">hoge3</label>
</div>
<p>hoge<span class="js-txt"></span>が選択されています</p>
</form>
.js-txtの中に、選択されたラジオボタンのvalueが入る想定です。
ラジオボタンの選択が変更された時（changeイベント発火時）に、.js-txtの中身が入れ替わるので、
$('input[name="hoge"]').on('change', function() {
var result = $(this).val();
$('.js-txt').text(result);
});
のように書くことができます。
しかし、画面がロードされた時にはイベントが発火しないので、ロード時の処理も必要になります。
var result = $('input[name="hoge"]:checked').val();
$('.js-txt').text(result);
同じことを2度書かなくてはいけないのは面倒です。
この処理をひとつにまとめることができるのが、.triggerHandler()です。
$('input[name="hoge"]').on('change', function() {
var result = $(this).val();
$('.js-txt').text(result);
}).triggerHandler('change');
.triggerHandler('change')でロード時に1回、changeイベントを擬似的に発火させます。
.triggerHandler()と.trigger()の違い
.triggerHandler()はjQueryでバインドされたイベントを呼び出すのに対して、.trigger()はその要素が持つイベントも呼び出します。
例
$('input').on('focus', function() {
$('<span>Focused!</span>').appendTo('body').fadeOut(1000);
});
$('#old').on('click', function() {
$('input').trigger('focus'); // inputにfocusが当たる
});
$('#new').on('click', function() {
$('input').triggerHandler('focus'); // inputにfocusは当たらず、テキストの挿入とフェードアウトのみ行われる
});
参照：.triggerHandler() | jQuery API Documentation
EventTarget.dispatchEvent()
ネイティブのJavaScriptでは、EventTarget.dispatchEvent()を使って実現しました。
const $form = document.getElementById('js-form');
const $radioNodeList = $form.hoge;
const $txtWrap = document.querySelector('.js-txt');
// イベントの作成
const event = new Event('change');
// changeイベント
$form.addEventListener('change', ()=> {
let result = $radioNodeList.value;
$txtWrap.textContent = result;
});
// 作成したイベントの呼び出し
$form.dispatchEvent(event);
new Event('change')でイベントを作成、$form.dispatchEvent(event);で作成したイベントを呼び出しています。
サンプル
https://codepen.io/kzmhrd/pen/EBVLNz