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

ハロトレWebデザインの勉強 | 求職者支援訓練Webサイト制作科 フェリカテクニカルアカデミー

未経験者からプロになるハロートレーニングWebデザインの勉強

イベント

イベントとは

  • ユーザーとWebサイトとの間でやりとりを行う処理を「イベント」と呼びます
  • イベントには、「ユーザーイベント」と「ブラウザイベント」の2種類があります
  • ユーザーイベントは、キーボードやマウスを操作することで実行されます
  • ブラウザイベントは、おもに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属性に値を代入します。

イベントの設定(登録)
  • 1つのセレクタに対して複数のイベントを登録する場合は、次のような記述になります
  $( '#btn' ).click( function( ){ } );
  $( '#btn' ).mouseover( function( ){ } );
  $( '#btn' ).mouseout( function( ){ } );


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

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


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

  $( '#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イベントの設定

>||html




clickイベントを設定






|


《定義》

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


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

<script>
$(function() {
  $( '#btn' ).click(   //clickイベントを設定
    { msg : 'ボタンをクリックしました' }, //イベントデータを設定
    function( e ) {  //イベントハンドラ関数を設定
      $( '#input' ).val( e.data.msg ); //valメソッドでテキストを設定
  });
});
</script>
  • イベントデータのオブジェクトにmsgプロパティを設定し、値に「ボタンをクリックしました」を設定しました
  • このイベントデータがイベントハンドラの引数eに渡され、dataオブジェクトに格納されます(引数名eは任意)
  • e.data.msgで参照されます