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

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

イベント

イベントでタイミングを設定

  • 意図したタイミングで処理を実行する

HTMLが読み込まれたタイミングで実行する

  • ready()イベント
<script>
$(document).ready(function(){
  //HTMLが読み込まれたときに、実行する処理を記述
});
</script>


の短縮形が以下の記述。

<script>
$(function(){
  //HTMLが読み込まれたときに、実行する処理を記述
});
</script>
他のイベント処理でも、ready()イベントは必須
<script>
$(function() {
  $( 'button' ).click(function(){
    //HTMLが読み込まれたときに、実行する処理を記述
  });
});
</script>

click()イベント

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



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

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


《変更後》

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


javascript:void(0)を使う

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


return false; を追加

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






広告を非表示にする