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
イベントを発生させると、ブラウザ組み込みの振る舞いが実行されてしまうので、チェック状態が反転してしまいます。
$('#c').click(function(){
var checked = $('#c').prop('checked');
$('#t').prop('disabled', !checked);
}).click(); // チェックボックスがクリックされてしまう!
.triggerHandler()
であれば、ユーザが定義したイベントハンドラだけが実行されます。
$('#c').click(function(){
var checked = $('#c').prop('checked');
$('#t').prop('disabled', !checked);
}).triggerHandler('click'); // チェックボックスがクリックされない!
これでスマートになりました。