jQueryのイベント

2011.08.19 0:12
 jQueryのイベントは、Webブラウザーでできる動作をだいたいすべてサポートしています。最近ではMacのマジックパットなるものやiPhoneやiPadのタッチスクリーンによる「タップ」とか「フリック」というような特殊...(といっても近い未来には全然特殊じゃなくなるわけですが...)な動作があります。が、ここでは単純にマウスを使った簡単なイベント動作をjQueryをつかって組み立ててみることを考えたいと思います。
 マウスを使って操作する場合は、主な動作はクリックとオンマウスというようなことになると思います。コレ以外の動作はこの動作の反動作(マウスを離すとか...)になります。その他では、Form関係の入力操作UIなどがそれに相当します。
 しかしjQueryのイベントハンドラでは、それらのイベントを束ねて処理したり、繰り返し(交互)の動作に対応させたり...といろいろあります。詳しいイベントについてはこちらが非常にわかりやすいです。

クリックした時に何かする

 クリックした際のイベントの扱いは、非常に簡単です。clickを使うだけです。どこがクリックされたかを判断するためにセレクタを指定して、その要素にクリックというイベントが起こった際にいろいろと処理することができます。サンプルでは、クリックされましたという表示をしています。
 
Sample

<script type="text/javascript">
jQuery('document').ready(function(){
    jQuery('#click').click(function(event){
        jQuery('#display').html("<b>クリックされました。</b>");
    });
});
</script>
</head>
<body>

<h1>click event</h1>
<div id="click"><a>click here !</a></div>
<div id='display'></div>
</body>
</html>






プロフィール



  • Name :: 山上オサム ♂(39)
  • Hobby :: 武術
  • Work :: Web Designer