2/2 jQueryのイベント [Javascript] All About

イベントの割り当て

jQueryのイベントについては、ここ(API/1.2/Events)に詳しいリファレンスがありますが、ここでは、とりあえず、手短に簡単なイベントメソッドを紹介します。

頻繁に使うイベントで、DOM要素をクリックするケースです。クリックすると、スライドアップエフェクトslideUp()を行います。

クリックしてください

<script src="./jquery-min.js" type="text/javascript"></script>
<style  type="text/css">
#myTest071030A1 {
    background:#F0ACFF;
    width:120px;
    height:120px;
    padding:10px;
}
</style>

<div id="myTest071030A1">
クリックしてください
</div>

<script type="text/javascript">
    $("#myTest071030A1").click(function () { 
                 $(this).slideUp();
    });
</script>

次のように、CSSをすべてjQueryで記述することもできます。。

クリックしてください

<script src="./jquery-min.js" type="text/javascript"></script>
<div id="myTest071030A2">
クリックしてください
</div>

<script type="text/javascript">
    $("#myTest071030A2")
             .css("background","#FFF290")
             .css("width","120px")
             .css("height","120px")
             .css("padding","10px")
             .click(function () { 
                 $(this).slideUp()
    });
</script>

このように、下記のような書式で記述できます。

$("CSSセレクタ").click(function(){ 
  //ここにクリックされた時のスクリプト
});

このclickの部分は、次のイベントタイプで使うことができ、それぞれのプロパティもクロスブラウザ化されているため、ここでもシンプルな記述が可能になります。(blur、change、dblclick、error、focus、 keydown、 keypress、 keyup、 load、 mousedown、 mousemove、 mouseout、 mouseover、 mouseup、 resize、scroll、 select、 submit、unload　) jQueryのイベントはほかにもいろいろありますが、詳細は、(API/1.2/Events)をご覧ください。

P.S. jQueryのAPIリファレンスとサンプル本として、当ガイド(高橋登史朗)が執筆した『jQuery入門』～魔法のJavaScriptリファレンス&サンプル～が発刊されています。手元でめっくって探せるリファレンスとして便利です。表紙カバーの裏には、全命令の一覧表(チートシート)と目次が印刷されています。