jQueryのイベント処理
javascriptではEventListener()
を使ってイベントを受け取ることができました。jQueryでイベントを受け付けるにはon()
メソッドを使用します。
HTMLの方はとくに細工する必要はありません。class名などを設定しておくだけでOK。on()
メソッドには以下のように、イベント名(click,mouseoverなど)とfunction()
を設定します。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Event</title>
</head>
<body>
<h1>jQuery Event</h1>
<!-- click event -->
<button class="click">CLICK ME!</button>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jQuery-event.js"></script>
</body>
</html>
javascript
$(function(){
$('.click').on('click' , function(){
alert('CLICKED!');
});
});
ブラウザで表示すると以下のようになります。
イベントの種類にはclick
の他にもフォームイベントやブラウザイベントなどたくさん用意されています。詳しくはjQueryリファレンスをご覧ください。
jQueryのイベントオブジェクト
javascriptにもあったように、jQueryでもイベントオブジェクトが用意されています。このオブジェクトからはイベントの種類やどのキーを押したかなどの情報を取得可能。
ここではタイムスタンプを取得してみます。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Event</title>
</head>
<body>
<h1>jQuery Event</h1>
<!-- event object -->
<button class="eobj">WHAT'S NOW?</button>
<p class="time"></p>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jQuery-event.js"></script>
</body>
</html>
jQuery
$(function(){
$('.eobj').on('click' , function(e){
var date = new Date();
// イベントオブジェクトからタイムスタンプをセット
date.setTime(e.timeStamp);
var dateString = date.toDateString();
// 表示
$('.time').text(dateString);
});
});
ブラウザで表示すると以下のようになります。
イベントオブジェクトの種類もたくさん用意されているので、詳細はjQueryリファレンスをご覧ください。