jQueryのイベント一覧

jQueryでは、マウスクリックやスクロール等のイベントに反応して実行する関数を以下のように指定する事が可能です。

$('#IdName').on('click', function(e) {
  console.log('クリックされました!');
});

clickやscroll,resizeなどは頻繁に使うので記憶に残りやすいのですが、他にも多くのイベントが存在します。

今回はそのイベント一覧と簡単な説明をご紹介したいと思います。

目次

• マウスクリック関係
  • 右クリック、左クリックを判別したい
• マウス移動関係
  • hover時の挙動をjQueryで制御したい
• フォーム関係
• キー操作関係
  • keydownとkeypressの違い
• 画面操作関係
• データ読み込み関係

マウスクリック関係

※以前はクリックした回数に応じて処理を変更出来るtoggleというイベントが存在しましたが、jQueryバージョン1.9で削除されました。

[クリック関係あるある]右クリック、左クリックを判別したい

ある範囲内でマウスクリックした際に、左or右クリックによって動作を変える必要がある場合、以下の問題に直面します。

1. どうやって左or右クリックを判別するか
2. 右クリックした際に出るコンテキストメニューを出したくない場合どうすればいいか

「１」に関しては、

$('#IdName').on('mouseup', function(e) {
  // e.whichには
  // 左クリック: 1
  // 中クリック: 2
  // 右クリック: 3
  // が入っています。
  console.log(e.which);
});

のように、e.whichで判断する事で解決できます。

「２」に関して、何も対策していないと右クリックする度にコンテキストメニューが出てきて非常に邪魔な上、そもそもコンテキストメニューを開いている状態ではmouseupイベントが取得出来ません。

なので、

$('#IdName').on('contextmenu', function(e) {
  return false;
});

のように、contextmenuイベントでreturn falseやpreventDefaultすれば解決します。

これを利用した実例を以下でご紹介します。

以下の例では、ボックス上で左クリックで赤、中クリックで青、右クリックで黒色にボックスの色が変化します。

ソースコード

<style>
  .rectBox {
    width: 100px;
    height: 100px;
    background: gray;
  }
</style>

<script>
  $(function() {
    var $box = $('#MouseBox1');

    $box.on('mouseup', function(e) {
      switch (e.which) {
        case 1:
          // 左クリック
          $box.css('background-color', 'red');
          break;
        case 2:
          // 中クリック
          $box.css('background-color', 'blue');
          break;
        case 3:
          // 右クリック
          $box.css('background-color', 'black');
          break;
      }
    });

    $box.on('contextmenu', function(e) {
      return false;
    });
  });
</script>

<div id="MouseBox1" class="rectBox"></div>

マウス移動関係

mouseover/mouseenter, mouseout/mouseleaveの違いは「バブリング」の有無です。

バブリングに関してはこの記事内では説明しきれないので、また後日紹介したいと思います。

[マウス移動関係あるある]hover時の挙動をjQueryで制御したい

マウスホバーの挙動をjQueryで制御したい時は、以下のように書けば制御可能です。

$('#IdName').on({
  'mouseover': function(e) {
    // マウスが乗った時の処理
  },
  'mouseout': function(e) {
    // マウスが離れた時の処理
  }
});

また、hover関数を使用して以下のように記述する事も可能です。

$('#IdName').hover(
  function(e) {
    // マウスが乗った時の処理
  },
  function(e) {
    // マウスが離れた時の処理
  }
);

フォーム関係

下記イベントは、form,input,select,textarea,buttonなどフォーム関係の要素のみに発生するイベントです。

キー操作関係

keydownとkeypressの違い

keypressは文字が入力される（実際に文字が入力されたかどうかは置いといて）キーにしか反応しません。

つまり、「A」や「１」、「-」等のキーには反応しますが、「Ctrl」や「Shift」などの修飾キーや、カーソルキーにはkeypressは反応しません。

画面操作関係

データ読み込み関係

readyとloadの発生順序に関しては、

ページ表示→ready→画像ロード完了&画像表示→load

という順序になっています。

以上

以上がjQueryのイベント一覧でした。

結構な量のイベントがあるので詳細まで覚える必要はないとは思いますが、各イベントの存在だけは覚えておいたらイチイチ自分で車輪の再発明をしてしまうことが減るので存在だけは覚えておいた方が良さそうですね。

以上、たにっぱでした〜。