読者です 読者をやめる 読者になる 読者になる

イベント

イベントとは

  • ユーザーとWebサイトとの間でやり取りを行う処理を「イベント」と呼びます
    1. ユーザーイベント(キーボードやマウスを操作することで実行されます)
    2. ブラウザイベント(おもにWebブラウザに関連するイベント)

イベントの設定

  • イベントを設定する構文は、on( )メソッドを使用します


$( セレクタ ) . on( 'イベント名', 'イベントハンドラ' );

ショートカットメソッド


$( セレクタ ) . イベント名( 'イベントハンドラ' );

イベントデータ
  • イベントデータとは、オブジェクト型のデータです


$( 親セレクタ ) . on( 'イベント名', '子セレクタ', 'イベントハンドラ' );


$( セレクタ ) . on( 'イベント名', 'イベントデータ', 'イベントハンドラ' );


$( セレクタ ) . イベント名( 'イベントデータ', 'イベントハンドラ' );

イベントハンドラ
  • イベントが発生したタイミングで実行される関数


イベントハンドラ( handler ) = function( 'イベントオブジェクト' ){ };;

イベントの設定(登録)
  • 1つのセレクタに対して、複数のイベントを登録する場合は、次のようになります
$( '#btn' ) .on({
  'click' : function( ){ },
  'mouseover' :  function( ){ },
  'mouseout' :  function( ){ }
});
  • 3つのイベントの処理が同じであれば、次のようにも記述できます
$( '#btn' ) .on( 'click mouseover mouseout',  function( ){ } );

ready( )イベント

  • このイベントは、DOMの読み込み完了時に実行されます
$( 'document' ) .ready( function( ) {
      //処理
});

省略して次のように記述します。

$( function( ) {
      //処理
});


ready( )イベントを使用しない場合は、body要素の終了タグの直前に記述します。