2014-12-24

2014-12-24

イベントAdd Star

 

 

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

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

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>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>click()イベント</title>
<scriptsrc="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><imgsrc="flower.png"alt="花"></p>
</body>
</html>


f:id:web-0818:20141013183609p:image


《変更後》

f:id:web-0818:20141013183610p:image


a要素に設定したclickイベントの処理
  • リンクとして実行されてしまう

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>a要素に設定したclickイベントの処理</title>
<scriptsrc="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><ahref="sea.png">画像を変更</a></p>
<p><imgsrc="flower.png"alt="花"></p>
</body>
</html>

 

javascript:void(0)を使う

 

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

 

return false; を追加

 

  • JavaScriptがオフの場合も、リンクは機能します
<script>
$(function(){
  $('a').click(function(){
    $('img').attr('src', 'sea.png').attr('alt', '海');
returnfalse;
});
});
</script>
</head>
<body>
<p><ahref="sea.png">画像を変更</a></p>
<p><imgsrc="flower.png"alt="花"></p>
</body>

イベントが発生した要素を取得する
  • サンプルは、eqセレクターを使って複数のa要素に対してそれぞれ異なるクリックイベントを設定しています
  • eqセレクターは特定の要素のうち、指定した順番の要素を取得するセレクターです

<!DOCTYPE html>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>イベントが発生した要素を取得する</title>
<scriptsrc="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', '花');
returnfalse;
});
  $('a:eq(1)').click(function(){
    $('img').attr('src', 'sea.png').attr('alt', '海');
returnfalse;
});
  $('a:eq(2)').click(function(){
    $('img').attr('src', 'Jellyfish.png').attr('alt', 'くらげ');
returnfalse;
});
  $('a:eq(3)').click(function(){
    $('img').attr('src', 'Building.png').attr('alt', '建物');
returnfalse;
});
});
</script>
</head>
<body>
<ul>
<li><ahref="flower.png"></a></li>
<li><ahref="sea.png"></a></li>
<li><ahref="Jellyfish.png">くらげ</a></li>
<li><ahref="Building.png">建物</a></li>
</ul>
<p><imgsrc="flower.png"alt="花"></p>
</body>
</html>

f:id:web-0818:20141013194252p:image


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


 

$(this)

 

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

f:id:web-0818:20141013194256p:image

f:id:web-0818:20141013194255p:image

f:id:web-0818:20141013194253p:image

f:id:web-0818:20141013194254p:image


mousedown()/mouseup()イベント

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

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


mouseup()
  • mouseup()は、特定の要素上にマウスのカーソルがある状態で、すでに押されているマウスのボタンが離れたタイミングで処理を実行します
<script>
$(function(){
  $('a').mouseup(function(){
    $('img').attr('src', $(this).attr('href')).attr('alt', $(this).text());
}).click(function(){
returnfalse;
});
});
</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>
<imgsrc="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>
<htmllang="ja">
<head>
<metacharset="UTF-8">
<title>クリックする度に画像が換わる</title>
<scriptsrc="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<scriptsrc="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
</head>
<body>
<divid="container">
<pid="imgChange"><imgsrc="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>


f:id:web-0818:20141013233735p:image

f:id:web-0818:20141013233755p:image

f:id:web-0818:20141013233811p:image

f:id:web-0818:20141013233826p:image