ywork2020.com

Title

要素のイベントにバインドされているハンドラーを実行する

目次 (INDEX)

triggerHandlerとは

ここで説明する triggerHandler とは次の語句からなるjQueryのメソッドです。
trigger
読み: トリガー
意味: (銃の)引き金、きっかけ、引き起こす
handler
読み: ハンドラー
意味: 扱い手、調教師

目次に戻る

triggerHandlerメソッドの概要

このメソッドは、イベントにバインドされたハンドラーを強制的に実行します。

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

つまり、このメソッドを使うと、 「 イベントが発生したときに実行されるように予め関連付けている関数を任意のタイミングで実行できる 」 ということです。

なお、このメソッドから実行されるハンドラーは、関連付けられているイベントの種類に関係なくバブリングを起こしません。

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

目次に戻る

構文

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

  • eventType : イベントを表す文字列です。
  • event : イベントオブジェクトのことです。
  • extraParameters : ハンドラーに渡すための引数です。配列、またはオブジェクトかオブジェクト型のマップ値で指定します。
$(Selector).triggerHandler(eventType [, extraParameters]);
$(Selector).triggerHandler(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").triggerHandler("mouseenter");
	});
	$("#idButton_B").click(function(){
		$("#idText").triggerHandler("mouseleave");
	});
</script>
  • 02-04: $("#idText").mouseenter(function(){処理}) (テキストボックスのマウスエンターイベントにハンドラーをバインドしています。)
  • 05-08: $("#idText").mouseleave(function(){処理}) (テキストボックスのマウスリーブイベントにハンドラーをバインドしています。)
  • 09-11: $("#idButton_A").click(function(){処理}) (この{処理}の部分でマウスエンターのハンドラーを呼び出して実行しています。)
  • 12-14: $("#idButton_B").click(function(){処理}) (この{処理}の部分でマウスリーブのハンドラーを呼び出して実行しています。)
実行結果:

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

目次に戻る