裏紙に書く程度の内容

jQuery eventType 一覧

jQueryでボタンや要素がクリックされた時のイベントを設定する際、bind()click(),live()等を使うと思います。
click()の場合はクリック時に発火ですが、bind(),live()の場合はトリガとなるイベントタイプを指定します。

そのイベントタイプの一覧です。

イベントタイプ一覧



































































































































































































イベント説明
blur要素がフォーカスを失ったとき
change要素が変化したとき
click要素がクリックされた時
dblclickダブルクリックされた時
errorロード時等で、エラーが発生したとき
focusフォーカスが当たったとき
keydownキーが押された時
keypressキーが押され、離されたとき
keyupキーが離された時
loadページが表示された時
mousedownマウスのボタンが押されたとき
mouseenterマウスが要素の範囲に入ってきたとき?
mouseleaveマウスが要素の範囲から出たとき?
mousemoveマウスのポインタが動いたとき
mouseoutマウスが要素の範囲から出たとき
mouseoverマウスが要素内で動いたとき
mouseupマウスのボタンが離された時
resizeウィンドウのサイズが変わったとき
scrollウィンドウがスクロールされた時
selectテキストが選択された時
submitサブミットされた時
unloadページが非表示になったとき?

百聞はワンルックにしかず

実際に動作を見たほうが早いかと。

以下、各要素にイベントを設定しています。発火したらconsole.log()でログ出力しているのでデバッグモードで確かめられます。

blur

$(".blur").bind("blur", function() {
  console.log("blur");
});

change

$(".change").bind("change", function() {
  console.log("change");
});

click

$(".click").bind("click", function() {
  console.log("click");
});
Target

dblclick

$(".dblclick").bind("dblclick", function() {
  console.log("dblclick");
});
Target

error

$(".error").bind("error", function() {
  console.log("error");
});
Target

focus

$(".focus").bind("focus", function() {
  console.log("focus");
});

keydown

$(".keydown").bind("keydown", function() {
  console.log("keydown");
});

keypress

$(".keypress").bind("keypress", function() {
  console.log("keypress");
});

keyup

$(".keyup").bind("keyup", function() {
  console.log("keyup");
});

load

※以下では動かない

$(".load").bind("load", function() {
  console.log("load");
});
Target

mousedown

$(".mousedown").bind("mousedown", function() {
  console.log("mousedown");
});
Target

mouseenter

$(".mouseenter").bind("mouseenter", function() {
  console.log("mouseenter");
});
Target

mouseleave

$(".mouseleave").bind("mouseleave", function() {
  console.log("mouseleave");
});
Target

mousemove

$(".mousemove").bind("mousemove", function() {
  console.log("mousemove");
});
Target

mouseout

$(".mouseout").bind("mouseout", function() {
  console.log("mouseout");
});
Target

mouseover

$(".mouseover").bind("mouseover", function() {
  console.log("mouseover");
});
Target

mouseup

$(".mouseup").bind("mouseup", function() {
  console.log("mouseup");
});
Target

resize

※以下では動かない

$(".resize").bind("resize", function() {
  console.log("resize");
});

scroll

※以下では動かない

$(".scroll").bind("scroll", function() {
  console.log("scroll");
});
Target

select

※以下では動かない

$(".select").bind("select", function() {
  console.log("select");
});
Target

submit

※以下では動かない

$(".submit").bind("submit", function() {
  console.log("submit");
});
Target

unload

※以下では動かない

$(".unload").bind("unload", function() {
  console.log("unload");
});
Target
load, scroll, select, submit, unloadは動作の確認できていません。これらはいつか整理する(よてい!)
URABLO
広告
Index
広告