jQuery API の triggerHandler( eventType ) は、１つ目の引数に指定したイベントを実行する。trigger( eventType ) と似ているが、ブラウザのデフォルトの動作は行わず、指定したイベントハンドラのみ実行する。
記述方法
jQuery( セレクター１ ) . イベントタイプ１( function() {
jQuery( セレクター２ ) . triggerHandler( イベントタイプ２ );
} );
jQuery( セレクター２ ) . triggerHandler( イベントタイプ２ );
} );
「セレクター１」の要素の「イベントタイプ１」のイベント時、「セレクター２」の要素の「イベントタイプ２」のイベントハンドラを実行する。
実装例（サンプル）
実装例（サンプル）の動作について
「入力する ( trigger )」ラジオボタンを選択すると、テキスト入力欄の右側に、「 ←入力」と2.5秒ほど表示し、テキスト入力欄をフォーカスする。
「入力する ( triggerHandler )」ラジオボタンを選択すると、テキスト入力欄の右側に、「 ←入力」と2.5秒ほど表示するが、テキスト入力欄をフォーカスしない。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-api-focus' ) . focus( function(){
jQuery( '#jquery-api-focused' ) . fadeIn( 500 ) . text( ' ←入力' ) . fadeOut( 2000 );
} );
jQuery( '#jquery-api-trigger' ) . click( function () {
jQuery( '#jquery-api-focus' ) . trigger( 'focus' );
} ) . click();
jQuery( '#jquery-api-triggerHandler' ) . click( function () {
jQuery( '#jquery-api-focus' ) . triggerHandler( 'focus' );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-api-focus' ) . focus( function(){
jQuery( '#jquery-api-focused' ) . fadeIn( 500 ) . text( ' ←入力' ) . fadeOut( 2000 );
} );
jQuery( '#jquery-api-trigger' ) . click( function () {
jQuery( '#jquery-api-focus' ) . trigger( 'focus' );
} ) . click();
jQuery( '#jquery-api-triggerHandler' ) . click( function () {
jQuery( '#jquery-api-focus' ) . triggerHandler( 'focus' );
} );
} );
// -->
</script>
CSS
<style>
<!--
#jquery-api-radio input {
margin: 0;
}
#jquery-api-radio label {
font-size: 16px;
color: black;
}
#jquery-api-focused {
color: red;
}
-->
</style>
<!--
#jquery-api-radio input {
margin: 0;
}
#jquery-api-radio label {
font-size: 16px;
color: black;
}
#jquery-api-focused {
color: red;
}
-->
</style>
HTML
<div id="jquery-api-radio">
<p>
<label for="jquery-api-trigger">
<input type="radio" id="jquery-api-trigger" name="jquery-api-radio"> 入力する ( trigger )
</label>
<p>
</p>
<label for="jquery-api-triggerHandler">
<input type="radio" id="jquery-api-triggerHandler" name="jquery-api-radio"> 入力する ( triggerHandler )
</label>
</p>
</div>
<p><input type="text" id="jquery-api-focus"><span id="jquery-api-focused"></span></p>
<p>
<label for="jquery-api-trigger">
<input type="radio" id="jquery-api-trigger" name="jquery-api-radio"> 入力する ( trigger )
</label>
<p>
</p>
<label for="jquery-api-triggerHandler">
<input type="radio" id="jquery-api-triggerHandler" name="jquery-api-radio"> 入力する ( triggerHandler )
</label>
</p>
</div>
<p><input type="text" id="jquery-api-focus"><span id="jquery-api-focused"></span></p>