obj にイベントハンドラを割り付けます。eventTypes にはイベントタイプ、handler にはイベントハンドラを指定します。下記の例では、b1ボタンを押した際に関数を実行し、ボタンの id属性の値を表示します。

$("button#b1").bind("click", function(e) {
    console.log($(this).attr("id"));        // b1
});

eventTypes には空白で区切って複数のイベントタイプを指定することが可能です。

$("div#d1").bind("mouseover mouseout", function() { console.log("!!!"); });

eventTypes には unbind() でイベントハンドラを識別しやすくするための名前空間を指定することができます。

$("div#d1").bind("click.myApp1", function() { console.log("!!!"); });

eventData にはベントハンドラに渡すデータを指定します。データは eventObject.data で受け取ります。

$("button#b1").bind("click", { a1: "AAA", a2: "BBB" }, function(e) {
    console.log(e.data.a1);        // AAA
});

イベントハンドラが true を返すと、リンクジャンプやサブミットなどイベント発生時のデフォルトの動作や上位要素へのイベント伝播が行われます。false を返すとデフォルトの動作や上位要素へのイベント伝播が抑止されます。

$("a#a1").bind("click", function(e) {
    console.log($(this).attr("href"));
    return false;         // Don't jump to sample.html
});

<a id="a1" href="sample.html">Sample</a>

preventBubble に false を指定しておくと、イベントハンドラの戻り値に関わらず、イベント発生時のデフォルト動作や上位要素へのイベント伝搬が抑止されます。

$("a#a1").bind("click", false);
$("a#a1").bind("click", function(e) {
    console.log($(this).attr("href"));
});

events には下記の様に、複数のイベントハンドラを一度に指定することもできます。

$("div#d1").bind({
    mouseover: function(e) {
        $(this).css("color", "red");
    },
    mouseout: function(e) {
        $(this).css("color", "black");
    }
});

obj からイベントハンドラを削除します。引数無しの場合すべてのハンドラを削除します。

$("#d1").unbind();

eventTypes を指定すると、指定したタイプのハンドラを削除します。

$("#d1").unbind("click");

bind() で名前空間を指定していれば、eventTypes にその名前空間を指定して削除することができます。

$("#d1").bind("click.myApp1", fn1);
$("#d1").bind("click.myApp1", fn2);
$("#d1").unbind("click.myApp1");

$("#d2").bind("mouseover.myApp1", fn1);
$("#d2").bind("mouseout.myApp1", fn2);
$("#d2").unbind(".myApp1");

handler を指定すると、指定したハンドラを削除します。

var fn1 = function() { ... };
$("#d1").bind("click", fn1);
$("#d1").unbind("click", fn1);

イベントハンドラの引数で受け取った eventObject を引数にして削除することもできます。

$("#d1").bind("click", function(event) {
    console.log("Click!");
    $(this).unbind(event);
});

bind("click", false) は、bind("click", function() { return false; }); と同様の意味を持ちますが、unbind("click", false) は、この false を返すハンドラを削除します。

$("#d1").bind("click", false);
$("#d1").unbind("click", false);

jQuery 1.3 で追加されました。bind() と似た動作ですが、bind() がその時点でマッチする要素に対してのみハンドラを設定するのに対し、live() は live() 呼び出し後に追加された要素に対してもハンドラを設定します。引数の詳細は bind() を参照してください。下記の例では、3行目で動的に追加したボタンをクリックした場合、LIVE は表示されますが、BIND は表示されません。jQuery 1.7 で非推奨となり、jQuery 1.9 で削除されました。代わりに on() を使用してください。

$("button").bind("click", function() { console.log("Bind!"); });
$("button").live("click", function() { console.log("Live!"); });
$(document.body).append("<button>OK</button>");

live() で追加したハンドラを削除します。jQuery 1.7 で非推奨となり、jQuery 1.9 で削除されました。代わりに off() を使用してください。

$("#d1").live("click", fn1);
$("#d1").die("click", fn1);

$(document).delegate("a", "click", fn1) は $("a").live("click", fn1) と同じ意味を持ちます。$(document) の範囲を狭めることで検索対象を絞り、効率を高めることができます。引数の詳細は bind() を参照してください。jQuery 1.4.2 で追加されましたが、jQuery 3.0 で廃止されました。

$("button").bind("click", function() { console.log("Bind!"); });
$("button").live("click", function() { console.log("Live!"); });
$(document).delegate("button", "click", function() { console.log("Delegate!"); });

delegate() で割り当てたイベントハンドラを削除します。

$(document).undelegate();
$(document).undelegate("a", "click");
$(document).undelegate("a", "click", fn1);

$(document).delegate("a", "click", function(event) {
    $(document).undelegate("a", event);     // Delete this handler
});

$(document).delegate("a", "click.myApp1", fn1);
$(document).undelegate(".myApp1");       // Delete handler with namespace .app1

jQuery 1.7 で追加されました。bind(), live(), delegate() の機能を再整理するものです。引数の詳細は bind() を参照してください。

$("#d1").on("click", function() { ... });
$("#d1").on("click", ".myClass1", function() { ... });
$("#d1").on("click", ".myClass1", { arg1: "AAA", arg2: "BBB" }, function() { ... });
$("#d1").on({
    click: function() { ... },
    mouseover: function() { ... },
    mouseout: function() { ... }
});

obj で指定した要素は on() 呼び出し以前に存在していたもののみが対象となりますが、selector で指定した要素は on() 呼び出し後に動的に追加された要素も対象となります。

$("button").on("click", function() { console.log("Click!"); });
$(document).on("click", "button", function() { console.log("Click!"); });
$(document.body).append("<button>OK<button>");    // クリックすると BBB のみが表示される

下記の2つの例は同様な動作となりますが、前者が tr の個数分のハンドラを設定するのに対し、後者は #myTable1 に対してひとつのみハンドラを設定するため、メモリなどの使用効率が向上します。

$("#myTable1 tr").on("click", function() { console.log("Click!"); });
$("#myTable1").on("click", "tr", function() { console.log("Click!"); });

on() で指定したハンドラが flase を返すと、自動的に event.stopPropagation() と event.preventDefault() が実行されます。また、on(eventTypes, false) は、false を返すハンドラを指定したとみなされます。class="disabled" が指定されたリンクのクリックを無効にします。

$("a.disabled").on("click", false);

on() で指定したハンドラを削除します。引数の詳細は unbind() を参照してください。

$("#d1").off();                                         // すべてのハンドラを削除
$("#d1").off("click");                                  // すべてのclickハンドラを削除
$("#d1").off("mouseover mouseout");                     // 複数のハンドラを削除
$("#d1").off("click.myApp1");                           // イベントタイプ＋namespace指定
$("#d1").off(".myApp1");                                // namespace指定
$("#d1").off("click", ".myClass1");                     // セレクタ指定
$("#d1").off("click", fn1);                             // ハンドラ指定
$("#d1").off({ mouseover:fn2, mouseout:fn3 });          // イベントタイプ＋ハンドラのマップ
$("#d1").on(function(event) { $("#d1").off(event); });  // イベントオブジェクトで指定

bind() と似た動作をしますが、登録したハンドラが一度だけ呼び出されます。引数の詳細は bind() を参照してください。

$("#d1").one("click", function() { console.log("!!"); });

obj に対して eventType イベントを擬似的に発行させます。

$("#d1").trigger("click");

extraParrameters にはイベントハンドラに渡す引数を指定します。

$("#d1").click(function(e, arg1, arg2) {
    console.log("Click!! arg1=" + arg1 + ", arg2=" + arg2);
});
$("#d1").trigger("click", [ "AAA", "BBB" ]);

引数に eventObject を指定することも可能です。

$("#button2").click(function(e) {
    console.log($(this).attr("id"));
});
$("#button1").click(function(event) {
    $("#button2").trigger(event);
});

trigger() と同様、obj に対して eventType イベントを擬似的に発行します。trigger() がフォーカスを移動したり、リンク先にジャンプしたりなど、ブラウザのデフォルトの動作を行うのに対して、triggerHandler() は設定されたハンドラのみを呼び出し、ブラウザのデフォルト動作を実施しない点が異なります。

$("#d1").triggerHandler("click");

.bind("error", handler(...)) のショートカットです。画像の読み込みに失敗した際などに発生します。下記の例では、画像の読み込みに失敗した場合に、代わりに sorry.gif画像を表示します。$(function() { ... }); の初期化処理の中に記述しますが、画像の読み込みが失敗するタイミングと、ハンドラを設定するタイミングによって、errorイベントをキャッチできないこともあるようです。jQuery 1.8 で非推奨となり 3.0で廃止されました。代わりに on("error", ...) を使用してください。

$("img").error(function() {
    $(this).attr("src", "image/sorry.gif");
});

.bind("resize", handler(...)) のショートカットです。ウィンドウがリサイズされた際などに発生します。下記の例では、ウィンドウがリサイズされた際にウィンドウサイズを表示します。引数を省略した場合、resizeイベントを擬似的に発生させます。

$(window).resize(function() {
    $("#d1").html($(window).width() + ", " + $(window).height());
});

.bind("scroll", handler(...)) のショートカットです。ウインドウがスクロールされた際などに発生します。下記の例では、ウィンドウがスクロールされた際にスクロール位置を表示します。引数を省略した場合、scrollイベントを擬似的に発生させます。

$(window).scroll(function() {
    $("#d1").html($(window).scrollTop());
});

.bind("ready", handler(...)) のショートカットです。$(handler) と同じ意味を持ちます。画像等を含まないドキュメントの読み込みが完了した際に発生します。下記の例では、ドキュメントの読み込みが完了した際にメッセージを表示します。

$(document).ready(function() {
    console.log("Ready!");
});

.bind("load", handler(...)) のショートカットです。画像等を含めてページの読み込みが完了した際に発生します。下記の例では、ページの読み込みが完了した際にメッセージを表示します。jQuery 1.8 で非推奨となり 3.0 で削除されました。代わりに on("load", ...) を使用してください。

$(window).load(function() {
    console.log("Hello!");
});

.bind("unload", handler(...)) のショートカットです。ページがアンロードされる際に発生します。jQuery 1.8 で非推奨となり 3.0 で削除されました。代わりに on("unload", ...) や on("beforeunload", ...) を使用してください。Chrome では unload 中にポップアップを表示することが禁止されていますので注意してください。

$(window).unload(function() {
    console.log("Bye!");
});

.bind("focus", handler(...)) のショートカットです。<input type="text"> などのフォーム部品にフォーカスが当たった際に発生します。

$("input:text#t1").focus(function() {
    console.log("Focus!!");
});

.focus() はオブジェクトに対して focus イベントを発行します。

$('#t1').focus();

.bind("blur", handler(...)) のショートカットです。<input type="text"> などのフォーム部品からフォーカスが外れた際に発生します。

$("input:text#t1").blur(function() {
    console.log("Blur!!");
});

.blur() はオブジェクトに対して blur イベントを発行します。

$('#t1').blur();

.bind("change", handler(...)) のショートカットです。<input type="text"> などのフォーム部品の値が変更された際に発生します。

$("input:text#t1").change(function() {
    console.log("Change!!");
});

.change() はオブジェクトに対して change イベントを発行します。

$('#t1').change();

.bind("select", handler(...)) のショートカットです。<input type="text"> などのフォーム部品の値が選択された際に発生します。

$("input:text#t1").select(function() {
    console.log("Select!!");
});

.select() はオブジェクトに対して select イベントを発行します。

$('#t1').select();

.bind("submit", handler(...)) のショートカットです。<form> によるフォームがサブミットされた際に発生します。false を返すとサブミットのデフォルト動作を抑止します。

$("form#f1").submit(function() {
    console.log("Submit!!");
    return false;
});

.submit() はオブジェクトに対して submit イベントを発行します。

$('#form1').submit();

.bind("focusin", handler(...)) のショートカットです。要素にフォーカスが移った際に発生します。

$("input#text1").focusin(function() {
    console.log("Focusin!!");
});

.focusin() はオブジェクトに対して focusin イベントを発行します。

$('#t1').focusin();

.bind("focusout", handler(...)) のショートカットです。要素からフォーカスが外れた際に発生します。

$("input#text1").focusout(function() {
    console.log("Focusout!!");
});

.focusout() はオブジェクトに対して focusout イベントを発行します。

$('#t1').focusout();

.bind("keydown", handler(...)) のショートカットです。要素の上でキーが押された際に発生します。

$("input#text1").keydown(function() {
    console.log("Keydown!!");
});

.keydown() はオブジェクトに対して keydown イベントを発行します。

$('#t1').keydown();

.bind("keyup", handler(...)) のショートカットです。要素の上でキーが離された際に発生します。

$("input#text1").keyup(function() {
    console.log("Keyup!!");
});

.keyup() はオブジェクトに対して keyup イベントを発行します。

$('#t1').keyup();

.bind("keypress", handler(...)) のショートカットです。要素の上でキーが押されている間発生します。

$("input#text1").keypress(function() {
    console.log("Keypress!!");
});

.keypress() はオブジェクトに対して keypress イベントを発行します。

$('#t1').keypress();

要素の上でクリックされた際に呼ばれるコールバックを指定します。

$("div#d1").click(function() {
    console.log("Click!!");
});

.click() はオブジェクトに対して click イベントを発行します。

$('#t1').click();

要素の上でダブルクリックされた際に呼ばれるコールバックを指定します。

$("div#d1").dblclick(function() {
    console.log("Double click!!");
});

.dblclick() はオブジェクトに対して dblclick イベントを発行します。

$('#d1').dblclick();

要素の上で右クリックされた際に呼ばれるコールバックを指定します。

$("div#d1").contextmenu(function() {
    console.log("Contextmenu!!");
});

.contextmenu() はオブジェクトに対して contextmenu イベントを発行します。

$('#d1').contextmenu();

要素の上にマウスが乗った際、離れた際に呼ばれるコールバックを指定します。handlerIn() は乗った際、handlerOut() は離れた際、handlerInOut() は乗った際および離れた際に呼び出されます。

$("div#d1").hover(function() {
    console.log("Hover!!");
});

.hover() はオブジェクトに対して hover イベントを発行します。

$('#d1').hover();

要素の上にマウスが入った際に呼ばれるコールバックを指定します。

$("div#d1").mouseenter(function() {
    console.log("Mouse enter!!");
});

.mouseenter() はオブジェクトに対して mouseenter イベントを発行します。

$('#t1').mouseenter();

要素の上にマウスが出た際に呼ばれるコールバックを指定します。

$("div#d1").mouseleave(function() {
    console.log("Mouse leave!!");
});

要素の上にマウスが入った際に呼ばれるコールバックを指定します。

$("div#d1").mouseover(function() {
    console.log("Mouse over!!");
});

mouseenter と mouseover は似たイベントですが、子要素との境界における動作が異なります。下記の例で、要素 B に mouseenter, mouseover を設定した場合、mouseenter は C から B に移動した際に発生するのに対し、mouseover は、C→B、B→A、A→B に移動した際に発生します。

要素の上にマウスが出た際に呼ばれるコールバックを指定します。

$("div#d1").mouseout(function() {
    console.log("Mouse out!!");
});

mouseleave と mouseout は似たイベントですが、子要素との境界における動作が異なります。下記の例で、要素 B に mouseleave, mouseout を設定した場合、mouseleave は B から C に移動した際に発生するのに対し、mouseout は、B→C、B→A、A→B に移動した際に発生します。

要素の上でマウスボタンが離された際に呼ばれるコールバックを指定します。

$("div#d1").mouseup(function() {
    console.log("Mouse up!!");
});

要素の上でマウスボタンが押された際に呼ばれるコールバックを指定します。

$("div#d1").mousedown(function() {
    console.log("Mouse down!!");
});

要素の上にマウスが動かされた際に呼ばれるコールバックを指定します。

$("div#d1").mousemove(function() {
    console.log("Mouse move!!");
});

obj をクリックする度に func1, func2, func3... を順番に呼び出します。jQuery 1.8 で非推奨となり、jQuery 1.9 で削除されました。

$("h1").toggle(
    function() { $(this).css("color", "red"); },
    function() { $(this).css("color", "blue"); },
    function() { $(this).css("color", "green"); }
);

"click", "mouseover" などのイベントタイプが設定されています。

$("#b1")click(function(event) {
    console.log(event.type);
});

イベントが発行された DOM要素を示します。イベントハンドラが設定された要素またはその子孫要素となります。this と target を比較することで、イベントが該当要素で発生したのか、その子要素で発生したのかを識別することができます。

$("#b1")mouseover(function(event) {
    if (event.target == this) {
        // この要素自体でイベントが発生した
    } else {
        // この要素の子要素でイベントが発生した
    }
});

通常は this と同じオブジェクトとなります。$.proxy() などで他スコープからの操作が行われた場合は、this と異なることがあります。

$("#d1").mouseover($.proxy(function(event) {
    $("#log").append("this = " + this.id + "\n");                           // d2
    $("#log").append("currentTarget = " + event.currentTarget.id + "\n");   // d1
}, $("#d2").get()[0]));

mouseover, mouseout イベントの際に、移動元、移動先のオブジェクトを示します。

$("#d1").mouseover(function(event) {
    $("#log").append("target = " + event.target.id + "\n");
    $("#log").append("relatedTarget = " + event.relatedTarget.id + "\n");
});

delegate() や on() でイベントの委任が行われる際、委任を行ったオブジェクトを示します。下記の例では、target は d1 になりますが、delegateTarget は BODY要素になります。

$(document.body).delegate("#d1", "click", function(event) {
    $("#log").append("delegateTarget = " + event.delegateTarget.nodeName + "\n");   // BODY
});

イベント設定時に指定したデータを示します。

$("#d1").click({ a1:"AAA", a2:"BBB" }, function(event) {
    $("#log").append("data.a1 = " + event.data.a1 + "\n");
    $("#log").append("data.a2 = " + event.data.a2 + "\n");
});

マウスイベントが発生したページ上の X位置、Y位置を示します。

$("#d1").click(function(event) {
    $("#log").append("pageX = " + event.pageX + "\n");
    $("#log").append("pageY = " + event.pageY + "\n");
});

キーボードイベントの場合はキーコードが、マウスイベントの場合は 1:左ボタン、2:中ボタン、3:右ボタン のいずれかが設定されます。

$("#d1").mousedown(function(event) {
    $("#log").append("which = " + event.which + "\n");
});
$("#d1").keypress(function(event) {
    $("#log").append("which = " + event.which + "\n");
});

他のイベントハンドラから返却された最後の値(undefined 以外のもの)を示します。

$("#d1").click(function(event) {
    return "hello";
});
$("#d1").click(function(event) {
    $("#log").append("result = " + event.result + "\n");     // hello
});

イベント発生時にメタキーが押されていたかを true / false で示します。MacOS の場合は Commandキーですが、Windows の場合は定義されていないようです。

$("#d1").click(function(event) {
    $("#log").append("metakey = " + event.metakey + "\n");
});

イベントのネームスペースを示します。

$("#d1").bind("test.myspace", function(event) {
    $("#log").append("namespace = " + event.namespace + "\n");    // myspace
});
$("#d2").bind("click.myspace", function(event) {
    $("#d1").trigger("test.myspace");
});

イベントの発生時刻を示します。1970年1月1日0時0分0秒(GMT)からの秒数で示されます。

$("#d1").click(function(event) {
    $("#log").append("timeStamp = " + event.timeStamp + "\n");    // 1359874113332
});

preventDefault() は、イベント発生時のデフォルトの動作(リンク先にジャンプするなど)を抑止します。isDefaultPrevented() は、preventDefault() が呼び出されているか否かを true / false で返します。

$("a").click(function(event) {
    -1.9
    $("#log").append("Chick!\n");
    event.preventDefault();
    console.log(event.isDefaultPrevented());
});

stopPropergation() は、子要素で発生したイベントが、親要素に伝播するのを抑止します。isPropergationStopped() は、stopPropergation() が呼び出されているか否かを true / false で返します。

$("#parent").click(function(event) {
    $("#log").append(this.id + "\n");
});
$("#child").click(function(event) {
    $("#log").append(this.id + "\n");
    event.stopPropagation();
    $("#log").append(event.isPropagationStopped());
});

stopImmediatePropergation() は、該当要素で発生したイベントが、該当要素に他に割り当てられた他のイベントハンドラに伝播するのを抑止します。isImmediatePropergationStopped() は、stopImmediatePropergation() が呼び出されているか否かを true / false で返します。

$("#parent").click(function(event) {
    $("#log").append("Event1\n");
});
$("#child").click(function(event) {
    $("#log").append("Event2\n");
    event.stopImmidiatePropagation();
    $("#log").append(event.isImmidiatePropagationStopped());
});
$("#child").click(function(event) {
    $("#log").append("Event3\n");
});