イベントをハンドリングする
jQuery - EventsのAPIを使って、エレメントにイベントハンドラを登録することができます。
- 「click」とか「mouseenter」みたいなイベント名に対応するメソッドがあるので、引数としてイベントハンドラとする関数を指定してそれを呼び出せばOK。
- すでに使っている「$(document).ready(function(){/*処理*/});」と一緒です。
- イベントハンドラの引数として、イベントオブジェクトが渡されてきます。
- 属性の一覧はこちら
以下は、mouseEnterとmouseLeaveを処理する簡単なサンプルです。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./jquery-1.3.2.js"></script> <script type="text/javascript"> $(function(){ var stdout = $("#stdout"); // #box にイベントハンドラを登録 $("#box").mouseenter( function(event) { stdout.append( "mouse over!<br/>" ) }); $("#box").mouseleave( function(event) { stdout.append( "mouse leave!<br/>" ); }); // 2重に登録する場合、「イベントハンドラの追加」になる。 // 置き換えになったりはしないのでご安心を。 $("#box").mouseenter( function(event) { stdout.append( "mouse over2!<br/>" ); }); }); </script> </head> <body> <div id="box" style="width:100px;height:100px;background-color:#6666FF;margin:10px;"></div> <div id=stdout></div> </body> </html>
