.triggerHandler()
要素に対し、指定したイベントタイプを実行させます。ただし、実行されるのはバインドさせた処理のみで、ブラウザが本来実行する処理は実行されません。
.triggerHandler()は下記の点を除き、.trigger()と同じ処理を行います。
- 本来ブラウザが実行するイベントを実行しません。(例:submitの送信処理)
- .triggerはマッチした要素全てに対して有効ですが、.triggerHandlerはマッチした要素の1つ目しか有効になりません。
- DOMツリーのバブルアップを行いません。マッチした要素で直接イベントが送信されなければ何も行いません。
- 戻り値にjQueryオブジェクトの代わりに最後のハンドラが実行した値を返します。どのイベントハンドラも実行されなければ、undefinedを返します。
.triggerHandler( eventType [, extraParameters] ) 1.2追加
戻り値:jQuery
引数 | 説明 |
---|---|
eventType | 'click'や'submit'等のjavaScriptイベントの文字列を指定します。 |
[extraParameters] | イベントハンドラに渡したいデータを指定します。 |
デモ
triggerHandler()を実行すると、ブラウザの本来の処理は行われず、イベントハンドラに指定した処理のみ 実行されることを確認してください。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br/><br/>
<input type="text" value="フォーカスします"/>
<script>
$("#old").click(function(){
$("input").trigger("focus");
});
$("#new").click(function(){
$("input").triggerHandler("focus");
});
$("input").focus(function(){
$("<span>フォーカス!</span>").appendTo("body").fadeOut(1000);
});
</script>
</body>
</html>
© 2010 - 2017 STUDIO KINGDOM