イベント - web-0127のブログ

イベントとは

ユーザーとWebサイトとの間でやりとりを行う処理を「イベント」と呼びます
イベントには、「ユーザーイベント」と「ブラウザイベント」の２種類があります
ユーザーイベントは、キーボードやマウスを操作することで実行されます
ブラウザイベントは、おもにWebブラウザに関連するイベントです

イベントの設定

イベントを設定する構文はonメソッドを使用します
「イベントハンドラ」とは、イベントが発生したタイミングで実行される関数です

《定義》

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

《例》

  $( セレクタ ).on( 'click', function(){ alert( 'クリックされました' ); } );

《onメソッドを使用しない場合》

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

《例》

  $( セレクタ ).click( function(){ alert( 'クリックされました' ); } );

イベントデータ

onメソッドの構文は、次のような記述もできます

《定義》

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

《定義》

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

onメソッドを使用しない方法

《定義》

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

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

  $( '#btn' ).click(  //clickイベントの設定
    { msg : 'クリックされました' },  //イベントデータ
    function( e ){ alert( e.data.msg ); }  //イベントハンドラ
  );

イベントデータをイベントハンドラ内から参照する場合は、イベントハンドラの引数eから参照することになります。

イベントデータはオブジェクト型なので、次のような構文になります

《定義》

  ( 'key' : 'value' )  //イベントデータの中身の構造

複数ある場合は、

《定義》

  ( 'keyA' : 'valueA', 'keyB' : 'valueB', 'keyC' : 'valueC' )

イベントハンドラ

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

《定義》

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

イベントデータのコードで出てきた引数eが、イベントオブジェクトにあたりますが、使用しない場合は省略することもできます

  $( '#btn' ).click(  //clickイベントの設定
    { msg : 'クリックされました' },  //イベントデータ
    function( e ){ alert( e.data.msg ); }  //イベントハンドラ
  );

id名画「btn」である要素にclickイベントを設定しています。
ユーザーがこの要素をクリックしたタイミングで、イベントハンドラ関数が実行されます。

引数eは、dataオブジェクトをプロパティとして持っています
このdataオブジェクトがイベントデータを参照しています

  e.data = { msg : 'クリックされました' }

イベントオブジェクト

組み込みオブジェクト

《例》

  $( document ).on( 'mousemove', function(e){
      $( 'input' ).val( 'e.pageX : ' + e.pageX + ', e.pageY' + e.pageY );
  } );

この記述は、マウスを動かすとマウスの座標を取得し、input要素のvalue属性に値を代入します。

イベントの設定（登録）

１つのセレクタに対して複数のイベントを登録する場合は、次のような記述になります

  $( '#btn' ).click( function( ){ } );
  $( '#btn' ).mouseover( function( ){ } );
  $( '#btn' ).mouseout( function( ){ } );

onメソッドを使用して簡潔に記述をすると

  $( '#btn' ).on( {
    'click' : function( ){ },
    'mouseover' : ( function( ){ },
    'mouseout' : function( ){ }
  } );

もし、３つのイベントのイベントハンドラが同じであれば、以下のように記述できます。

  $( '#btn' ).on( 'click mouseover mouseout' : function( ){ } );

ショートカットメソッドを使用しても、onメソッドをしても処理的には同じです。

ユーザーイベントとブラウザイベント

clickイベントやmousemoveイベントは、ユーザーの操作によって発生するイベントで、ユーザーイベントと呼ばれます
ブラウザイベントは、Webブラウザに関連するイベントになります

resizeイベント

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ウィンドウリサイズの値を取得</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  $( window ).on( 'resize', function() {
    $( 'input' ).val( $( window ).width() + ' : ' + $( window ).height() );
  });
});
</script>
</head>
<body>
<p><input type="text" value=""></p>
</body>
</html>

clickイベントの設定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>clickイベントを設定</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(function() {
  $( '#btn' ).click( function() {
    $( '#input' ).val( 'ボタンをクリックしました' );
  });
});
</script>
</head>
<body>
<p><button id="btn">ボタン</button></p>
<p><input type="text" value="" id="input"></p>
</body>
</html>

《定義》

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

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

上の記述を書き換えてみると、以下のようになります。

<script>
$(function() {
  $( '#btn' ).click(   //clickイベントを設定
    { msg : 'ボタンをクリックしました' }, //イベントデータを設定
    function( e ) {  //イベントハンドラ関数を設定
      $( '#input' ).val( e.data.msg ); //valメソッドでテキストを設定
  });
});
</script>

イベントデータのオブジェクトにmsgプロパティを設定し、値に「ボタンをクリックしました」を設定しました
このイベントデータがイベントハンドラの引数eに渡され、dataオブジェクトに格納されます（引数名eは任意）
e.data.msgで参照されます