jQuery 初心者のためのイベント処理の書き方

2014-08-18

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);
    });
});

ブラウザで表示すると以下のようになります。