• Facebook
  • Twitter
  • RSS

月別

コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

jQueryのイベント一覧

投稿者アイコン

2015/04/27

書いた人:
tanippa!
カテゴリ:
javascript   jQuery
13,257 views

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

jQueryのイベント一覧


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

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


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

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

目次

マウスクリック関係

イベント 説明
click 指定要素上で左クリック時に発生。
dblclick 指定要素上でダブルクリック時に発生。
ダブルクリックした際もclickイベントは発生する点に注意。
contextmenu 指定要素上でマウス右ボタンを押した際に発生。
コンテキストメニューを表示させたくない場合は、このイベントでreturn falseやpreventDefaultする。
mousedown 指定要素上で左or右ボタンを押した際に発生。
mouseup 指定要素上で左or右ボタンを離した際に発生。

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

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

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

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

「1」に関しては、

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


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

「2」に関して、何も対策していないと右クリックする度にコンテキストメニューが出てきて非常に邪魔な上、そもそもコンテキストメニューを開いている状態では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>


マウス移動関係

イベント名 説明
mousemove 指定要素上でマウスカーソルが動いた際に発生。
mouseover/mouseenter 指定要素上にマウスカーソルが入った際に発生。
mouseout/mouseleave 指定要素上からマウスカーソルが離れた際に発生。

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などフォーム関係の要素のみに発生するイベントです。

イベント名 説明
focus/focusin 要素にフォーカスが当たった(細い線で囲まれる等)時に発生。
blur/focusout 要素からフォーカスが外れた際に発生。
change 要素の内容が変更された時に発生。
input[type=text]やtextareaに関しては、イベント発生タイミングがフォーカスが外れた際なので注意。
select inputやtextareaのテキストを選択した際に発火する。
正直用途不明ですね…
submit フォームが送信されるときに発生。

キー操作関係

イベント名 説明
keydown/keypress キーが押された時に発生。
keyup キーが離されたときに発生。

keydownとkeypressの違い

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

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

画面操作関係

イベント名 説明
scroll 画面がスクロールした際に発生。
resize ウィンドウのサイズが変更された際に発生。

データ読み込み関係

イベント名 説明
ready HTMLが読み込まれた際に発生。
unload 別のページに遷移する際に発生。
load データの読み込みが完了した際に発生。
error データの読み込みに失敗した際に発生。

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

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

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

以上

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

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

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


この記事を読んだ人はこんな記事も読んでいます

<

>