triggerHandler()

jQueryにはtriggerHandler()というメソッドがあります。
DOM要素に対してイベントを発火させるものですが、on()などで定義したイベントハンドラのみが実行されます。
ブラウザに組み込まれている振る舞いは実行されません。

このtriggerHandler()の使いみちは何でしょうか？

こんなフォームを考えてみます。
チェックボックスとテキストボックスがあります。

<label><input type='checkbox' id='c' checked='checked'> on</label>
<input type='text' id='t' value='' />

チェックボックスにチェックを入れる/外すと、テキストボックスが有効/無効になるという制御をさせたいとします。
これをjQuery使って制御するとしたら、こんな感じのコードになりますよね。

$('#c').click(function(){
    var checked = $('#c').prop('checked');
    $('#t').prop('disabled', !checked);
});

さて

ここからが問題です。

このテキストボックスの有効/無効の制御が必要になるのは、チェックボックスをクリックした時だけではありません。
そう。ページの読み込み（初期レンダリング）時です。

未チェック状態のフォームを生成する場合、テキストボックスを無効状態にしなければなりません。
これをサーバ側で面倒をみて、以下のようなHTMLを生成するのはサーバ側のコードの複雑化を招きます。

<label><input type='checkbox' id='c'> on</label>
<input type='text' id='t' value='' disabled='disabled' />

どうせ、画面制御はクライアント側（javascript側）で面倒をみなければならないのですから、この処理もクライアント側にやらせたいところです。

とは言え

こういうコードは嫌ですね。

var toggle_textbox = function(){
    var checked = $('#c').prop('checked');
    $('#t').prop('disabled', !checked);
}

// ページ読み込み時
toggle_textbox();

// チェックボックスがクリックされた時のハンドラ設定
$('#c').click(toggle_textbox);

コードが野暮ったいし、名前も考えなきゃいけないので面倒ですよね。

ここでtriggerHandler()登場

前置きが長くなりました。
ここでtriggerHandler()の出番です。

要はページの読み込み時にチェックボックスの(click)ハンドラと同じことをやらせれば良いのですから、擬似的にclickイベントを発生させれば良いわけです。

しかし、単純に.click()でclickイベントを発生させると、ブラウザ組み込みの振る舞いが実行されてしまうので、チェック状態が反転してしまいます。

NG

$('#c').click(function(){
    var checked = $('#c').prop('checked');
    $('#t').prop('disabled', !checked);
}).click();                                 // チェックボックスがクリックされてしまう！

.triggerHandler()であれば、ユーザが定義したイベントハンドラだけが実行されます。

OK

$('#c').click(function(){
    var checked = $('#c').prop('checked');
    $('#t').prop('disabled', !checked);
}).triggerHandler('click');                 // チェックボックスがクリックされない！

これでスマートになりました。