stacktrace.jp

プログラミングに関する雑多なStackの形跡

Home>jQuery>jQuery 1.2.6 リファレンス>Events>イベントオブジェクト

イベントオブジェクト

解説

jQueryのイベントオブジェクトは W3Cの規格に基づいて標準化されています。 type, target, pageX/Yプロパティと、stopPropagation(), preventDefault()メソッドを提供します。イベントオブジェクトは、イベントハンドラの引数として渡されます。

また、バインド時に渡されたデータは、dataプロパティで参照できます。（例）

プロパティ

type ：イベントの種別。
target ：イベント対象のDOM要素。
pageX/Y ：マウスポインタの位置。

メソッド

stopPropagation() ：イベントの伝播（バブリング）を停止します。
preventDefault() ：標準のアクションを停止します。

type

イベントの種別を表す文字列です。

例1:クリックすると、イベント種別"click"を表示します。

$("#test_type").click(function(event){
    alert("event.type: " + event.type);
})

テスト1

id=test_type

target

イベント対象のDOM要素です。

例:クリックしたDOM要素のプロパティを表示します。

$("#test_target").click(function(event){
    var buff = [];
    $.each(event.target, function(key, value){
        buff.push(key + ":" + value);
    });
    $("p.display").text("[" + buff.join(", ") + "]");
});

テスト2

id=test_target

div要素

p要素

pageX/Y

イベントが発生した時のマウスポインタの位置です。

例:クリックしたマウスの位置を表示します。

$("#test_pageX_Y").click(function(event){
    alert("event.pageX: " + event.pageX + "\n" +
          "event.pageY: " + event.pageY);
})

テスト3

id=test_pageX_Y

stopPropagation()

イベントの伝播（バブリング）を停止します。

例:"#def"をクリックすると、クリックイベントが上位の"#parent"まで伝播しますが、 "#spp"をクリックした場合は、event.stopPropagation()が実行され、クリックイベントが上位の"#parent"まで伝播しません。

$("#parent").click(function(event){
    alert(event.target.id=="parent" ? "parent clicked!" : "click event bubbling!");
});

$("#def").click(function(event){
    alert("default clicked!");
});

$("#spp").click(function(event){
    alert("stopPropagation clicked!");
    event.stopPropagation();
});

テスト4

parent (id="parent")

default (id="def")

stopPropagation (id="spp")

preventDefault()

標準のアクションを停止します。

例:#prdのリンクをクリックした場合は、event.preventDefault()が実行され、リンク先のページに遷移しません。

$("#prd").click(function(event){
    event.preventDefault();
})

テスト5

ページトップヘ

スポンサードリンク