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

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

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

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 で復元することができます

<!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>