.trigger()と.triggerHander()について解説しています。
簡単に言うと、.trigger()はイベントを起動し、.triggerHander()はイベントハンドラを実行します。
それではそれぞれについて詳しく見ていきましょう。
目次
.trigger()はイベントを起動するメソッド
.on()やそのショートカットでアタッチされたイベントハンドラは、対応するイベントが起きたときに実行されます。
しかし、それらのイベントハンドラは.trigger()メソッドにより手動で実行することができます。
手動と言ってもユーザーが手で操作するという意味ではなく、ユーザーが操作することなくプログラムでイベントを起動するという意味です。
.trigger()メソッドの構文は以下の2種類あります。
.trigger(eventType [,extraParameters]).trigger(event [,extraParameters])それぞれについて説明します。
.trigger(eventType [,extraParameters])
文字列でイベントタイプを指定して、イベントを起動します。
- eventType
'click'や'submit'のように、JavaScriptのイベントタイプを表す文字列。- [,extraParameters]
- イベントハンドラに渡す追加のパラメータ。
.trigger(event [,extraParameters])
jQueryのイベントオブジェクトを指定して、イベントを起動します。
- events
- jQueryのイベントオブジェクト(jQuery.Event)。
- [,extraParameters]
- イベントハンドラに渡す追加のパラメータ。
.trigger()の注意点
.tigger()に渡されるextraParametersと、.on()に渡されるeventDataには異なる点があります。
.tigger()に渡されるextraParametersは、イベントが起きた時点の情報を判別できます。しかし.on()に渡されるeventDataは、イベントハンドラがバインドされた時点ですでに情報が計算されている必要があります。
.trigger()の使い方
.trigger()の簡単な使い方を紹介します。
まずは、リストとボタンが2個あるHTMLを用意します。
<ul>
<li>りんご</li>
<li>みかん</li>
<li>メロン</li>
</ul>
<button id="button1">mouseenterをトリガー</button>
<button id="button2">mouseleaveをトリガー</button>上記のHTMLにおいて、以下のJavaScriptを実行します。
<script type="text/javascript">
$('li').on({
mouseenter: function(){
$(this).css('color','red');
},
mouseleave: function(){
$(this).css('color','black');
}
});
$('#button1').click(function(){
$('li').trigger('mouseenter');
});
$('#button2').click(function(){
$('li').trigger('mouseleave');
});
</script>1個めのボタンをクリックするとliにアタッチされたmouseenterイベントが起動して「りんご」「みかん」「メロン」の文字が赤色になります。
2個めのボタンをクリックするとliにアタッチされたmouseleaveイベントが起動して「りんご」「みかん」「メロン」の文字が黒色になります。
.triggerHandler()はイベントハンドラを実行するメソッド
.triggerHandler()は要素にアタッチされたイベントハンドラを実行します。
.triggerHandler()メソッドの構文は以下の2種類あります。
.triggerHandler(eventType [,extraParameters]).triggerHandler(event [,extraParameters])それぞれについて説明します。
.triggerHandler(eventType [,extraParameters])
文字列でイベントタイプを指定して、イベントハンドラを実行します。
- eventType
'click'や'submit'のように、JavaScriptのイベントタイプを表す文字列。- [,extraParameters]
- イベントハンドラに渡す追加のパラメータ。
.triggerHandler(event [,extraParameters])
jQueryのイベントオブジェクトを指定して、イベントハンドラを実行します。
- events
- jQueryのイベントオブジェクト(jQuery.Event)。
- [,extraParameters]
- イベントハンドラに渡す追加のパラメータ。
.trigger()と.triggerHandler()の違い
それぞれのメソッドの違いについて簡単に説明します。
.trigger()は要素のイベントを起動し、.triggerHandler()はイベントハンドラを実行するという違いがあります。
.trigger()でsubmitイベントを起動するとフォーム上から送信されますが、.triggerHandler()では送信されません。
.trigger()はマッチする全ての要素で動作しますが、.triggerHandler()は最初にマッチした要素にのみ影響します。
.triggerHandler()により実行されたイベントハンドラは、DOM階層をバブリング(バブルアップ)しません。ターゲットとなる要素に直接処理されない場合は、何もしません。
.triggerHandler()はメソッドチェインを可能とするjQueryオブジェクトを返す代わりに、最後に実行されたハンドラによって返された値を返します。ハンドラがトリガーされない場合はundefinedを返します。
.triggerHandler()の使い方
.triggerHandler()の簡単な使い方を紹介します。
使い方は.tigger()とほとんど同じですが、少し挙動が異なります。
まずは、リストとボタンが2個あるHTMLを用意します。
<ul>
<li>りんご</li>
<li>みかん</li>
<li>メロン</li>
</ul>
<button id="button1">mouseenterをトリガー</button>
<button id="button2">mouseleaveをトリガー</button>上記のHTMLにおいて、以下のJavaScriptを実行します。
<script type="text/javascript">
$('li').on({
mouseenter: function(){
$(this).css('color','red');
},
mouseleave: function(){
$(this).css('color','black');
}
});
$('#button1').click(function(){
$('li').trigger('mouseenter');
});
$('#button2').click(function(){
$('li').trigger('mouseleave');
});
</script>1個めのボタンをクリックするとliにアタッチされたmouseenterのイベントハンドラが実行され「りんご」の文字が赤色になります。
.trigger()の場合とは違い、最初にマッチした要素のイベントハンドラしか実行されないので「りんご」の文字だけが赤色になります。
2個めのボタンをクリックするとliにアタッチされたmouseleaveのイベントハンドラが実行され「りんご」の文字が黒色になります。
