trigger( eventType, extraParameters )

投稿日: 2011年8月22日 作成者: alphasis

jQuery API の trigger( eventType, extraParameters ) は、１つ目の引数に指定したイベントを実行する際、２つ目の引数に指定したパラメーターを引き渡す。trigger( eventType, [ param1, param2, ･･･ ] ) のように、extraParameters を[ ] で囲んで記述すれば、複数のパラメーターを引き渡すこともできる。

記述方法

パラメーターの設定

jQuery( セレクター１ ) . イベントタイプ１( function() {
    jQuery( セレクター２ ) . trigger( { イベントタイプ２, パラメーター } );
} );
jQuery( セレクター１ ) . イベントタイプ１( function() {
    jQuery( セレクター２ ) . trigger( { イベントタイプ２, [ パラメーター１, パラメーター２ ] } );
} );

パラメーターの受け取り

jQuery( セレクター２ ) . イベントタイプ２( function( event, パラメーター ) {
    イベントハンドラ
} );
jQuery( セレクター２ ) . イベントタイプ２( function( event, パラメーター１, パラメーター２ ) {
    イベントハンドラ
} );

実装例（サンプル）

青色

紫色

赤色

実装例（サンプル）の動作について

  1. 青色、紫色、赤色それぞれのボックスをクリックすると、それぞれのボックスが、フェードアウト、フェードインする。
  2. 「トリガー」ボタンをクリックすると、青色、紫色、赤色全てのボックスがフェードアウトし、背景色がオレンジ色になり、ボックス内テキストが「トリガー」に変わり、フェードインする。
  3. オレンジ色の背景色に変わったそれぞれのボックスをクリックすると、背景色も、ボックス内テキストも、元に戻る。

実装例（サンプル）のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-api-trigger' ) . click( function () {
        jQuery( '#jquery-api-click-1, #jquery-api-click-2, #jquery-api-click-3' ) . trigger( 'click', [ 'orange', '<p>トリガー</p>' ] );
    } );
    jQuery( '#jquery-api-click-1' ) . click( function ( event, param1, param2 ) {
        jQuery( this ) . fadeOut( 1000, function () {
            jQuery( this ) . css( 'backgroundColor', param1 || 'blue' ) . html( param2 || '<p>青色</p>'  ) . fadeIn( 1000 );
        } );
    } );
    jQuery( '#jquery-api-click-2' ) . click( function ( event, param1, param2 ) {
        jQuery( this ) . fadeOut( 1000, function () {
            jQuery( this ) . css( 'backgroundColor', param1 || 'purple' ) . html( param2 || '<p>紫色</p>'  ) . fadeIn( 1000 );
        } );
    } );
    jQuery( '#jquery-api-click-3' ) . click( function ( event, param1, param2 ) {
        jQuery( this ) . fadeOut( 1000, function () {
            jQuery( this ) . css( 'backgroundColor', param1 || 'red' ) . html( param2 || '<p>赤色</p>'  ) . fadeIn( 1000 );
        } );
    } );
} );
// -->
</script>

CSS

<style>
<!--
#jquery-api-wrap {
    width: 480px;
    text-align: center;
}
#jquery-api-click-1, #jquery-api-click-2, #jquery-api-click-3 {
    margin: 10px;
    width: 138px;
    height: 138px;
    border: 1px solid gray;
    border-radius: 10px;
    float: left;
}
#jquery-api-click-1 p, #jquery-api-click-2 p, #jquery-api-click-3 p {
    margin-top: 50px;
    color: white;
}
#jquery-api-click-1 {
    background-color: blue;
}
#jquery-api-click-2 {
    background-color: purple;
}
#jquery-api-click-3 {
    background-color: red;
}
-->
</style>

HTML

<div id="jquery-api-wrap">
    <p><button id="jquery-api-trigger">トリガー</button></p>
    <div id="jquery-api-click-1"><p>青色</p></div>
    <div id="jquery-api-click-2"><p>紫色</p></div>
    <div id="jquery-api-click-3"><p>赤色</p></div>
    <div style="clear: left;"></div>
</div>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, イベント, イベントハンドラ・アタッチメント パーマリンク