jQuery入門 | イベント処理 | イベントの概念（event handler、event object）

Tags:

イベントとは

Webページはユーザーと数多くの相互作用を行う。 ユーザーはマウスを動かしたり、要素をクリックしたり、テキストボックスに文字を書いたりするなど、多くの種類の動作を行う。

このようなユーザーの動作はすべてイベントを発生させる。 つまり、イベントが発生したということは、Webページで特定の動作が発生し、Webブラウザがその事実を通知することを意味する。

イベントハンドラー

Webページでは多くのイベントが継続的に発生する。 特定要素で発生するイベントを処理するには、イベントハンドラーという関数を作成して接続する必要がある。 イベントハンドラーが接続された特定要素で指定されたタイプのイベントが発生すると、Webブラウザは接続されたイベントハンドラーを実行する。

次の例は、イベントハンドラーを作成して接続した例である。

$("p").on({
    mouseenter: function() {
        $(this).css("background-color", "yellow");
    },
    mouseleave: function() {
        $(this).css("background-color", "blue");
    },
    click: function() {
        $(this).css("background-color", "red");
    }
});

イベントオブジェクト

イベントハンドラー関数がjQueryでコールバックされるとき、イベントオブジェクトが関数の引数として渡される。 渡されたイベントオブジェクトを利用して、イベントの特性を判断したり、イベントの既定動作を防いだりできる。 jQueryのイベントオブジェクトは、W3C標準勧告に従うイベントオブジェクトを正規化したものである。

代表的に使用するものは次のとおりである。

  • type: イベントの種類
  • pageX: ブラウザ画面を基準にしたマウスのX座標位置
  • pageY: ブラウザ画面を基準にしたマウスのY座標位置
  • preventDefault(): 既定イベントを削除する。
  • stopPropagation(): イベント伝播を止める。

さらに見る - http://api.jquery.com/category/events/event-object/

次の例は、preventDefault()メソッドとstopPropagation()の違いを確認できる例である。

// メソッド呼び出しなし
$("#text1").on("click", function(e){
    $(this).css('color', 'green'); 
});

// preventDefaultメソッド呼び出し
$("#text2").on("click", function(e){
    $(this).css('color', 'green');

    e.preventDefault();
});

// stopPropagationメソッド呼び出し
$("#text3").on("click", function(e){
    $(this).css('color', 'green');

    e.stopPropagation();
});

// 両方呼び出し
$("#text4").on("click", function(e){
    $(this).css('color', 'green');

    e.preventDefault();
    e.stopPropagation();
});

$("div").on("click", function(e){
    $(this).css('background-color', 'yellow');         
});

preventDefault()を使用して<a>タグの既定イベントを削除する。 stopPropagation()を使用して<div>タグへイベントが伝播することを防ぐ。

コードを実行

参照

http://api.jquery.com/category/events/event-object/