PbTimes 情報誌

jQueryのいろいろなイベントについて

2013/08/12

• JavaScript
• jQuery

jQueryでよく使われるイベントの紹介

一番よく使われているクリックしたときに実行されるイベントです。

$("#selecter").click(function() {
  //クリック時の処理
});

変更されたときに実行されます。
よくプルダウンなどで使用されます。

$("#selecter").change(function () {
  //変更時の処理
}).change();

マウスオーバー時の処理を行います。

$("#selecter").hover(function () {
  //オンマウス時の処理
}, function () {
  //マウスが離れた時の処理
});

テキストボックスなどが選択された時に実行されます。

$("input").focus(function () {
  //フォーカス時の処理
});

toggleの使用方法です。
クリックされるたびに、処理1と処理2が交互に実行されます。

$("#selecter").toggle(
  function () {
    //処理1
  },
  function () {
    //処理2
  }
);

キーボードでキーが押し込まれた際に実行されます。

$(window).keydown(function(e){
  $("div").text(e.keyCode);
  return false;
});

キーボードのキーが押され、上がった際に実行されます。

$(window).keyup(function(e){
  $("div").text(e.keyCode);
});

マウスが移動したときに実行されます。

$("div").mousemove(function(e){
  var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
  var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
  $("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
  $("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});

スクロールされたときに実行されます。

$(window).scroll(function () {
  //スクロール時の処理
});

テキストボックスなどで、文字列を選択したときなどに実行されます。

$(document).select( function () {
  //選択された時の処理
});

Formでサブミットしたときに実行されます。

$("form").submit(function() {
  /Submit時の処理
});