ywork2020.com

Title

要素のイベントを強制的に実行する

目次 (INDEX)

triggerとは

ここで説明する trigger とは次の語句からなるjQueryのメソッドです。
trigger
読み: トリガー
意味: (銃の)引き金、きっかけ、引き起こす

目次に戻る

triggerメソッドの概要

このメソッドは、要素のイベントを強制的に実行します。 これにより、要素にバインドされているハンドラーも実行されることになります。

ハンドラーとは具体的にいうとイベントにバインドされた 「 関数 」【function】のことを指しています。

つまり、このメソッドを使うことで、 「 任意のイベントを発生させて、それに関連付けている関数も実行させることができる 」 ということです。

なお、このメソッドはイベントの種類によって、バブリングを起こすか起こさないかが変化します。 バブリングに関しては各イベントのページを参照してください。

このメソッドに類似したものとして、 triggerHandler() があります。 これはおおよその違いとして先に書いているバブリングを適用するかしないかの問題です。 しかし、イベントを誘発するということから考えれば若干ですが、ブラウザによっては挙動の違いがあるかもしれません。 具体的に参考例を挙げると、このメソッドは 「 イベントを強制的に実行するので、仮にクリックイベントを発生させた場合、クリックのアニメーションを再現する可能性もある 」 わけです。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

  • eventType : イベントを表す文字列です。
  • event : イベントオブジェクトのことです。
  • extraParameters : ハンドラーに渡すための引数です。配列、またはオブジェクトかオブジェクト型のマップ値で指定します。
$(Selector).trigger(eventType [, extraParameters]);
$(Selector).trigger(event [, extraParameters]);

目次に戻る

サンプルコードと実行結果

ここでは、input 要素 text 型 の mouseenter イベントと mouseleave イベントを ボタンのクリックにより、強制的に実行するサンプルを用意しました。

これにより、各イベントにバインドされているハンドラーも実行されることになります。

サンプルコード: CSS 
<style>
	div{
		margin: 3em 0;
	}
</style>
サンプルコード: HTML 
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
	<div>
		<input type="text" value="" id="idText">
	</div>
	<div>
		<button id="idButton_A">Click to run the triggerHandler("mouseenter")</button>
	</div>
	<div>
		<button id="idButton_B">Click to run the triggerHandler("mouseleave")</button>
	</div>
	<script>...</script>
</body>
  • 07: input type="text" (テキストボックスです。この要素に 予め mouseenter と mouseleave のイベントハンドラーを仕込んでおきます。)
  • 10: button id="idButton_A" (ボタンです。この要素をクリックすることで mouseenter イベントをトリガーします。)
  • 13: button id="idButton_B" (ボタンです。この要素をクリックすることで mouseleave イベントをトリガーします。)
サンプルコード: script 
<script>
	$("#idText").mouseenter(function(){
		$(this).focus().attr("placeholder", "入力待ちです");
	});
	$("#idText").mouseleave(function(){
		$("#idButton_B").focus();
		$(this).attr("placeholder", "フォーカスが外れました");
	});
	$("#idButton_A").click(function(){
		$("#idText").trigger("mouseenter");
	});
	$("#idButton_B").click(function(){
		$("#idText").trigger("mouseleave");
	});
</script>
  • 02-04: $("#idText").mouseenter(function(){処理}) (テキストボックスのマウスエンターイベントにハンドラーをバインドしています。)
  • 05-08: $("#idText").mouseleave(function(){処理}) (テキストボックスのマウスリーブイベントにハンドラーをバインドしています。)
  • 09-11: $("#idButton_A").click(function(){処理}) (この{処理}の部分でマウスエンターイベントを発生させます。)
  • 12-14: $("#idButton_B").click(function(){処理}) (この{処理}の部分でマウスリーブイベントを発生させます。)
実行結果:

このサンプルの動作検証を行うには、まずテキストボックスに対してマウスポインターを乗せたり外したりしてみてください。 動作が確認できたら、テキストボックスの下に配置されているボタンをクリックしてみてください。同じ関数が実行されていることが見て取れるはずです。

目次に戻る