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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

イベント

イベントとは

  • ユーザーと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要素の終了タグの直前に記述します。

click()イベント

  • 特定の要素がクリックされたときに、何らかの処理を実行する命令

$( セレクター ).click(function(){
  //セレクターで指定した要素がクリックされたときに実行する処理
});

click()の記述
<!DOCTYPE html>
<html lang="ja"><head>
<meta charset="UTF-8">
<title>click()イベント</title>
<style>
button {
  cursor: pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p><button>画像を変更</button></p>
<p><img src="img/flower.png" alt="花"></p>
<script>
$(function(){
  $( 'button' ).click(function(){
    $( 'img' ).attr( 'src', 'img/sea.png' ).attr( 'alt', '海' );
  });
});
</script>
</body>
</html>


《変更後》


a要素に設定したclickイベントの処理
  • リンクとして実行されてしまう
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a要素に設定したclickイベントの処理</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  $( 'a' ).click(function(){
    $( 'img' ).attr( 'src', 'img/sea.png' ).attr( 'alt', '海' );
  });
});
</script>
</head>
<body>
<p><a href="img/sea.png">画像を変更</a></p>
<p><img src="img/flower.png" alt="花"></p>
</body>
</html>


javascript:void(0)を使う

  • JavaScriptがオフの場合は機能しません
<body>
<p><a href="javascript:void(0)">画像を変更</a></p>
<p><img src="img/flower.png" alt="花"></p>
</body>


return false; を追加

  • JavaScriptがオフの場合も、リンクは機能します
<script>
$(function(){
  $( 'a' ).click(function(){
    $( 'img' ).attr( 'src', 'img/sea.png' ).attr( 'alt', '海' );
    return false;
  });
});
</script>
</head>
<body>
<p><a href="img/sea.png">画像を変更</a></p>
<p><img src="img/flower.png" alt="花"></p>
</body>
イベントが発生した要素を取得する
  • サンプルは、eqセレクターを使って複数のa要素に対してそれぞれ異なるクリックイベントを設定しています
  • eqセレクターは特定の要素のうち、指定した順番の要素を取得するセレクターです
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベントが発生した要素を取得する</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(function(){
  $( 'a:eq(0)' ).click(function(){
    $( 'img' ).attr( 'src', 'img/flower.png' ).attr( 'alt', '花' );
    return false;
  });
  $( 'a:eq(1)' ).click(function(){
    $( 'img' ).attr( 'src', 'img/sea.png' ).attr( 'alt', '海' );
    return false;
  });
  $( 'a:eq(2)' ).click(function(){
    $( 'img' ).attr( 'src', 'img/Jellyfish.png' ).attr( 'alt', 'くらげ' );
    return false;
  });
  $( 'a:eq(3)' ).click(function(){
    $( 'img' ).attr( 'src', 'img/Building.png' ).attr( 'alt', '建物' );
    return false;
  });
});
</script>
</head>
<body>
<ul>
<li><a href="img/flower.png"></a></li>
<li><a href="img/sea.png"></a></li>
<li><a href="img/Jellyfish.png">くらげ</a></li>
<li><a href="img/Building.png">建物</a></li>
</ul>
<p><img src="img/flower.png" alt="花"></p>
</body>
</html>



画像を変更する機能は実装できました。


$(this)

  • イベントが発生した要素を取得するセレクタ
  • イベントを設定しているclick(function(){…})内で$(this)と書くと、イベントが発生した要素を取得できます
<script>
$(function(){
  $( 'a ').click(function(){
    $( 'img' ).attr( 'src', $(this).attr( 'href' )).attr( 'alt', $(this).text() );
    return false;
  });
});
</script>





mousedown()/mouseup()イベント

mousedown()
  • mousedown()は、特定の要素上にマウスのカーソルがある状態で、マウスのボタンが押されたときに処理を実行します
<script>
$(function(){
  $( 'a' ).mousedown(function(){
    $( 'img' ).attr( 'src', $(this).attr( 'href' )).attr( 'alt', $(this).text() );
  }).click(function(){
    return false;
  });
});
</script>


この例の場合、a要素の上にマウスカーソルがある状態でマウスのボタンが押されたら、img要素のsrc属性とalt属性を書き換えます。

mouseup()
  • mouseup()は、特定の要素上にマウスのカーソルがある状態で、すでに押されているマウスのボタンが離れたタイミングで処理を実行します
<script>
$(function(){
  $( 'a' ).mouseup(function(){
    $( 'img' ).attr( 'src', $(this).attr( 'href' )).attr( 'alt', $(this).text() );
  }).click(function(){
    return false;
  });
});
</script>


この例の場合、a要素の上にマウスカーソルがある状態ですでに押されているマウスのボタンが離れたら、img要素のsrc属性とalt属性を書き換えます。

mouseover()/mouseout()イベント

  • 特定の要素上にマウスが重なったタイミングを感知して、処理を実行します
  • ボタンのマウスオーバー効果などに利用されます
mouseover()
mouseout()
<script>
$(function(){
  $( 'img' ).mouseover(function(){
    $(this).attr( 'src', 'img/sea.png' ).attr( 'alt', '海' );
  }).mouseout(function(){
    $(this).attr( 'src', 'img/flower.jpg' ).attr( 'alt', '花' );
  });
});
</script>
</head>
<body>
<img src="img/flower.png" alt="花">
</body>
toggle
  • 同じ命令を繰り返し処理する
  • 1.9からは削除されたメソッド
  • jQuery Migrate 1.2.1 で復元することができます


http://blog.jquery.com/2013/05/08/jquery-migrate-1-2-1-released/

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>クリックする度に画像が換わる</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<div id="container">
<p id="imgChange"><img src="img/surf01.png"></p>
</div>
<script>
$(function(){
  $('#imgChange').toggle(function(){
    $('img').attr('src','img/surf02.png');
  },function(){
    $('img').attr('src','img/surf03.png');
  },function(){
    $('img').attr('src','img/surf04.png');
  },function(){
    $('img').attr('src','img/surf01.png');
  });
});
</script>
</body>
</html>




広告を非表示にする