LoginSignup
5

More than 5 years have passed since last update.

jQueryのtriggerHandler()の使いみち

Last updated at Posted at 2016-11-19

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');                 // チェックボックスがクリックされない!

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5