ホーム > イベント (全7件)
  • コントロール+クリックのイベントを実行させる

    コントロールキーを押しながらクリックした時のイベントを発行する。

    ctrl_click = $.Event( 'click' );
    ctrl_click.ctrlKey = true;
    $(this).trigger( ctrl_click );
    

    事前にクリックイベントオブジェクトを生成し、ctrlKeyプロパティにtrueを設定してtriggerメソッドを利用する($(this)は適宜変更)。

  • エンターキーが押された時に何かする

    IDがaddrの入力ボックスでエンターキーが押された時に何かする

    $( '#addr' ).keypress( function ( e ) {
    	if ( e.which == 13 ) {
    		// ここに処理を記述
    		return false;
    	}
    } );
    

    押されたキーはe.whichで確認でき、エンターキーは13となる。falseを返すことでイベントの引継ぎは中断される。

  • チェックボックスのクリック時の対応を指定する

    チェックボックスのクリック時の処理を指定する。

    /* 単独のクリックイベント処理の場合 */
    $( 'input[type="checkbox"]' ).click( function() {
    	// ここに処理内容を記述する
    } );
    
    /* ブラウザ標準のイベント処理を行わない場合 */
    $( 'input[type="checkbox"]' ).click( function( e ) {
    	// ここに処理内容を記述する
    	e.preventDefault();
    } );
    

    属性の値を指定して検索する場合は [属性名=属性値] の書式で指定する。onClickイベントの処理はclick関数で対応する関数を指定すればよい。

  • ブラウザのサイズ変更(リサイズ)で何かする

    ブラウザのサイズが変更された際、変更後のサイズに合わせて位置や領域を調整する。

    $(document).ready( function () {
    	$(window).resize( function () {
    		// ここに処理内容を記述
    	} );
    }

    onResizeイベントはresize関数に処理内容を記述すればいい。

  • onChangeイベントを処理する

    IDがperfのSELECT要素のonChangeイベントを処理する。

    $( '#perf' ).change( function () {
    	// ここに処理内容を記述
    } );
    

    選択されたOPTION要素(の値)、処理中に $(this).children(':selected').val() を記述する。

  • onClickイベントを処理する

    IDがpagetopのA要素のonClickイベントを処理する。

    $( '#pagetop' ).click( function () {
    	// ここに処理内容を記述
    	return false;
    } );
    

    通常のJavaScriptと同様に、ページ遷移させない場合はfalseを返す。なお追加したコンテンツ内でonClickイベントを処理する場合はonメソッドが使える。

  • jQueryで初期処理を行う2

    HTMLドキュメント、画像が読み込まれたタイミング(window.onloadイベント)で実行するスクリプトを記述する。

    jQuery.event.add( window, 'load', function() {
    	/* ここにスクリプトを記述する */
    } );
    

    onloadイベント前に何らかの処理を行う場合は、ready関数を使用する。