jQueryのイベント一覧まとめ【サンプルコード有】

2019年8月4日

よく忘れがちなjQueryメソッドのイベントについて、よく使うものもあまり使わないものも含めてまとめました。

ほぼすべてサンプルコード付きで載せていますので、コピペなどでもご活用頂けると思います。

イベントメソッドの基本的な文法

jQueryのイベントメソッドは、基本的に下記のように書きます。

例えば、sample（＝セレクタ）というクラスが付いたボタンがクリック（＝メソッド）されたら、アラートを出したい（＝イベントハンドラ）という処理は、上記の記述を下記のように置き換えることで実行できます。

サンプルコード
<input type="button" class="sample" value="イベント">

<script>
$('.sample').click(function(){
    alert('alert!');
});
</script>

追加した要素にイベントを設定する場合は、onメソッドで伝播させる

例えば、JavaScriptによる操作で、後から追加された要素にイベントを設定したい場合は、上記のように書いてもイベントは発生しません。

サンプルコード
<div class="sample0-html"></div>

<script>
$('.sample0').click(function(){
    alert('alert!');
});

$('.sample0-html').html('<input type="button" class="sample0" value="イベント">');
</script>

ボタンを押しても、イベントが発火されませんよね。

このコードは、イベント設定時にまだ要素が存在していないため、イベントとして認識されないために起きている症状です。

解決するには、.onメソッドを使用して、処理を伝播させる必要がありますので、以下のサンプルをご確認ください。

サンプルコード
<div class="sample1-html"></div>

<script>
//これは実行されない
$('.sample1').click(function(){
    alert('alert!');
});
//これは実行される
$(document).on('click', '.sample1', function(){
    alert('on alert!');
});

$('.sample1-html').html('<input type="button" class="sample1" value="イベント">');
</script>

onメソッドを使用することで、処理としては、

document要素（要するにすべての要素）がクリックされてイベント発生
↓
イベントが発生したdocument要素が「.sample1」か調べる
↓
「.sample1」なら処理を実行

となるので、後から追加した要素にも対応できます。

とはいえ、document onの処理は処理範囲が広くなるので、すべてonに置き換えるのではなく、適材適所でソースを記述していきましょう。

jQueryのクリック系イベント一覧

jQueryのクリックイベント

最も使われるであろう、クリック操作で引き起こせるイベントをまとめました。

一番使用する「.click」はスマホのタップにも対応しています。

「.click」クリック・タップ時にイベントを発火させる

クリック時にイベントを発生させたい場合は「$(要素).click(function(){イベント}」で実行できます。

クリックとありますがスマホのタップにも有効です。

サンプルコード
<input type="button" class="click_sample" value="クリックイベント">
<script>
$(function(){
    $('.click_sample').click(function(){
        alert('click!');
    });
});
</script>

「.dblclick」ダブルクリック時にイベントを発火させる

ダブルクリック時専用のイベントも設定できます。

同要素に通常のクリックイベントも設定されていた場合は、そちらも実行されてしまうのでご注意ください。

スマホの連続タップには反応しません。

サンプルコード
<input type="button" class="dblclick_sample" value="クリックイベント">
<script>
$(function(){
    $('.dblclick_sample').dblclick(function(){
        alert('dbl click!');
    });
});
</script>

「.mousedown／.mouseup」マウスボタンを押した時、戻した時にイベントを発火させる

マウスボタンを押したとき、押した状態のまま戻した時にイベントを発生させることが出来ます。

.mouseup実行時に、カーソルが要素に上に重なっていない場合は、処理は実行されません。

スマホユーザーが圧倒的に多い昨今のインターネット環境では、あまり利用機会がないと思われます。

サンプルコード
<input type="button" class="mousedu_sample" value="イベント実行">
<script>
$(function(){
    $('.mousedu_sample').mousedown(function(){
        //マウスを押したとき、ボタンを赤くする
        $(this).css('background-color', 'red');
    });
    $('.mousedu_sample').mouseup(function(){
        //押したマウスボタンを戻した時、ボタンを青くする
        $(this).css('background-color', 'blue');
    });
});
</script>

マウス操作イベントを発生させた要素を取得する$(this)を使用して、.css()で背景色を変更しています。

参考 jQueryで$(this)の使い方【サンプルコード有】

参考 jQueryでcssの設定・変更・削除をする方法【サンプル有】

「.mousemove／.mouseover／.mouseout」マウス移動関係のイベントを発火させる

マウスの移動関係のイベントも用意されています。

.mousemove 指定要素内でカーソルを動かした時
.mouseover 指定要素内にカーソルが入った時
.mouseout 指定要素内からカーソルが外れた時

こちらもカーソルの概念がないスマホでは組み込むことが難しいため、あまり使う機会は少ないかもしれません。

サンプルコード
<div class="mouseiv_sample" style="color: #FFF; height:100px; border:2px solid #CCC; text-align:center"></div>
<script>
$(function(){
    $('.mouseiv_sample').mouseover(function(){
        //カーソルが中に入ったら、要素を赤くする
        //実質mousemoveも同時に実行されます
        $(this).css('background-color', 'red');
    });
    $('.mouseiv_sample').mousemove(function(){
        //カーソルの中で動いたら、テキストを変化させる
        $(this).text('移動中…');
    });
    $('.mouseiv_sample').mouseout(function(){
        //カーソルが外に出たら、元に戻す
        $(this).css('background-color', 'white');
        $(this).text('');
    });
});
</script>

cssの:hoverみたく、同一の要素に複数のマウス関係のイベントを設定したい場合は、このような記述も可能です。（他のイベントも同様ですが）

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

jQueryのスマホタッチ（タップ）系イベント一覧

jQueryとスマホタップイベント

スマホのタップ系イベントも、clickとは別で用意されています。

clickイベントがパソコン・スマホ両対応なことに対して、こちらはスマホのみを対象としたイベントのため、使い分けが必要です。

また、タッチイベントは$(要素).on(‘touchstart’, function(){のように、.onの記述でないとイベントが発火されないため注意してください。

「.touchstart／.touchend」画面をタッチ（タップ）した時にイベントを発火させる

スマホ画面にタッチした時にイベントを発火させることが出来ます。

下記のサンプルコードの動作確認はスマホでお願いします。

サンプルコード
<div class="touch_sample" style="color: #FFF; height:100px; border:2px solid #CCC; text-align:center;">.touchイベント</div>
<script>
$(function(){
    $('.touch_sample').on('touchstart', function(){
        $(this).css('background-color', 'red');
        $(this).text('touch!');
    });
    $('.touch_sample').on('touchend', function(){
        $(this).css('background-color', 'blue');
        $(this).text('touch end!');
    });
/*
    2つ設定する場合は↓こう書くこともできます。
    $('.touch_sample').on({
        'touchstart': function(e){
            // タッチした時の処理
        },
        'touchend': function(e){
            // タッチから離れた時の処理
        }
    });
*/
});
</script>
.touchイベント

.clickとの違いとして、.clickはタッチした指が離れた時に発火する事に対して、.touchstartはタップした瞬間にイベントが発火されます。

以下にクリック／タップしたらカウントが増える要素がありますので、スマホで触って違いを確認してみてください。

.touch時カウント「0」
.click時カウント「0」

.touchのほうが早くカウントされていることが分かります。

ユーザーに瞬時に反映を伝えることが出来るため、使い方によってはUIの向上に繋がります。

「.touchmove」画面をタッチしながら動かした（スワイプ）した時にイベントを発火させる

指定要素を指で動かした時、（用語的にはスワイプした時に）イベントを発火させることが出来ます。

サンプルコード
<div class="touchmove_sample" style="height:100px; border:2px solid #CCC; text-align:center;"></div>
<script>
$(function(){
    $('.touchmove_sample').on('touchmove', function(){
        event.preventDefault();//画面が動くのを止める
        var x = event.changedTouches[0].pageX;
        var y = event.changedTouches[0].pageY;
        $(this).text('X:' + x + ' Y:' + y);
    });
});
</script>

ページ全体から、スワイプした位置を取得しています。

jQueryのフォーム系イベント一覧

jQueryのキーボード入力イベント

WEBではよく使用されるフォームの関連イベントです。

各種フォーム部品に特化したjQuery操作は、各記事でもまとめられていますので、こちらも是非ご確認ください。

当ページではイベントに絞ってまとめています。

「.focus」フォーカスが当たった時に実行される／.blur外れた時に実行される

フォーカスが当たった時、または外れた時にイベントを実行させることが出来ます。

サンプルコード
<input type="text" class="focus_sample">
<script>
$(function(){
    $('.focus_sample').focus(function(){
        //フォーカスが当たったら背景色を青くする
        $(this).css('background-color', 'blue');
    });
    $('.focus_sample').blur(function(){
        //フォーカスが外れたら背景色をデフォルトに戻す
        $(this).css('background-color', 'transparent');
    });
});
</script>

「.change」フォーム要素に変更が加わった時に実行される

changeメソッドによるイベントは、フォーム部品によって仕様がこのようになっています。

テキストボックス
(input-text) 		入力内容が確定したら（フォーカスが外れたら）処理が実行
チェックボックス
(input-checkbox) 		チェックが付く・外れるで処理が実行
セレクトボックス
(select) 		セレクトボックスの値が変更されたら処理が実行
ラジオボタン
(input-radio) 		選択が変更されたら処理が実行
サンプルコード
<p>
    <input type="text" class="change-input" data-exe="テキストボックス">
</p>

<p>
    <input type="checkbox" class="change-check" data-exe="チェックボックス">チェックボックス
</p>

<p>
    <select class="change-select" data-exe="セレクトボックス">
    <option value="1">選択肢1</option>
    <option value="2">選択肢2</option>
    </select>
</p>

<p>
    <input type="radio" name="radio3" class="change-radio" data-exe="ラジオボタン">選択肢1
    <input type="radio" name="radio3" class="change-radio" data-exe="ラジオボタン">選択肢2
</p>

<div class="change_result" style="margin-top:20px">変更待機中…</div>

<script>
$(function(){
    $('.change-input').change(function(){
        var html = '<span style="color:red">テキストボックス</span>でchangeイベントが実行されました！';
        $('.change_result').html(html);
    });
    $('.change-check').change(function(){
        var html = '<span style="color:red">チェックボックス</span>でchangeイベントが実行されました！';
        $('.change_result').html(html);
    });
    $('.change-select').change(function(){
        var html = '<span style="color:red">セレクトボックス</span>でchangeイベントが実行されました！';
        $('.change_result').html(html);
    });
    $('.change-radio').change(function(){
        var html = '<span style="color:red">ラジオボタン</span>でchangeイベントが実行されました！';
        $('.change_result').html(html);
    });
});
</script>

チェックボックス

選択肢1 選択肢2

変更待機中…

「.input」入力時にイベントを実行させる

入力時にon inputでイベントを発火させることが出来ます。

入力補完（サジェスト）を表示させたり、文字数をリアルタイムに表示させたり等の機能を実現できます。

サンプルコード
<input type="text" class="input_sample" value="">
<p class="input_result"></p>

<script>
$(function(){
    $('.input_sample').on('input', function(){
        var input_text = $(this).val();
        $('.input_result').text(input_text.length + '文字入力');
    });
});
</script>

「.keydown／.keypress／.keyup」キー入力時にイベントを発火させる

キーボード入力に関するメソッドでもイベントの発火が出来ます。

.keydown 修飾キーを含めた全てのキーが押された時
.keypress 文字キーが押された時
.keyup キーが離された時

スマホのキーボードは対応していません。

以下のサンプルは、キー入力時に対応のコードを下に表示させています。

サンプルコード
<input type="url" class="key_sample" value="">
<p class="key_result"></p>

<script>
$(function(){
    $('.key_sample').keydown(function(e){
        $(".key_result").text('キーコード：' + e.keyCode);
    });
});
</script>

全角入力時には、どのキーを押してもキーコードが229となるのでご注意ください。

各種キーの対応表はこちらになります。

1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
0 48
A 65
B 66
C 67
D 68
E 69
F 70
G 71
H 72
I 73
J 74
K 75
L 76
M 77
N 78
O 79
P 80
Q 81
R 82
S 83
T 84
U 85
V 86
W 87
X 88
Y 89
Z 90
– 173
^ 160
\ 220
@ 64
[ 219
] 221
; 59
: 58
, 188
. 190
/ 191
テンキー 1 97
テンキー 2 98
テンキー 3 99
テンキー 4 100
テンキー 5 101
テンキー 6 102
テンキー 7 103
テンキー 8 104
テンキー 9 105
テンキー 0 96
テンキー ／ 111
テンキー * 106
テンキー – 109
テンキー + 107
テンキー . 110
テンキー Enter 13
F1 112
F2 113
F3 114
F4 115
F5 116
F6 117
F7 118
F8 119
F9 120
F10 121
F11 122
F12 123
↑ 38
↓ 40
← 37
→ 39
Enter 13
Shift 16
Ctrl 17
Alt 18
Space 32
BackSpace 8
Esc 27
Tab 9
CapsLock 20
NumLock 144
Insert 45
Delete 46
Home 36
End 35
PageUp 33
PageDown 34
ScrollLock 145
Windows 91
英数 240
半角/全角 243
漢字 244
無変換 29
変換 28

特定のキーのみに処理を行いたい場合は以下のように書けます。

$(function(){
    $('.key_sample').keydown(function(e){
        if(e.keyCode == 49){
            //1を押したら何かの処理をする
        }
    });
});

jQueryの画面変化イベント一覧

jQueryで画面変更系のイベントについてまとめました。

「.scroll」スクロール時にイベントを発火させる

パソコン、スマホ共に、画面スクロール時にイベントを発火させることが出来ます。

ブラウザスクロール時にイベントを発火

ブラウザ画面のスクロールの場合は、$(window)要素を指定します。

サンプルコード
<div class="scroll_sample"></div>

<script>
$(function(){
    $(window).scroll(function(e){
        $(".scroll_sample").text('ブラウザ全体のスクロール位置:' + $(this).scrollTop());
    });
});
</script>

要素内スクロール時にイベントを発火

要素内のスクロールの場合は、$(‘要素(div等)’)に置き換えます。

サンプルコード
<div class="scroll_area" style="height: 100px; width: 100px; overflow-y: scroll; border:1px solid #CCC; margin-bottom:10px;">
このエリアがスクロールされたらイベントが発火されます。高さが指定されている要素かつ、overflowの指定がscrollになっていないと、スクロールバーが出ないので注意しましょう。
</div>
<div class="scroll_area_sample">スクロール位置：</div>

<script>
$(function(){
    $('.scroll_area').scroll(function(e){
        $(".scroll_area_sample").text('スクロール位置：' + $(this).scrollTop());
    });
});
</script>
このエリアがスクロールされたらイベントが発火されます。高さが指定されている要素かつ、overflowの指定がscrollになっていないと、スクロールバーが出ないので注意しましょう。
スクロール位置：

「.resize」画面サイズ変更時にイベントを発火させる

ブラウザの画面の幅が変更されたらイベントを発火できるメソッドです。

$(window)以外の要素は指定できません。

サンプルコード
<div class="resize_sample">パソコンの方は、実際に画面を変更してみてください。</div>

<script>
$(function(){
    $(window).resize(function(e){
        var h = $(this).height();
        var w = $(this).width();
        $('.resize_sample').text('h:' + h + ' w:' + w);
    });
});
</script>
パソコンの方は、実際に画面を変更してみてください。

jQueryの読み込み系イベント一覧

jQueryでは、読み込みが完了した時や、失敗した時のメソッドも用意されています。

「.ready／.load」読み込みが完了した時にイベントを発火させる

.readyと.loadは、読み込み完了時に実行されるメソッドですが、仕様が微妙に違います。

.ready HTMLの読み込みが終わったとき
.load 画像などコンテンツ全体の読み込みが終わったとき

そのため、基本は「.ready」→「.load」の順で実行されます。

サンプルコード
<div class="load_result"></div>

<script>
var aryHoge = [];
$(document).ready(function(){
    aryHoge.push('ready');
    $('.load_result').text(aryHoge.join(','));
});
$(window).on('load', function(){
    aryHoge.push('load');
    $('.load_result').text(aryHoge.join(','));
});
</script>

サンプルコードでも、「.ready」→「.load」の順に実行されていることが分かりますね。

「.error」読み込みに失敗した時にイベントを発火させる

画像などのデータの読み込みに失敗した時にイベントを発火させることが出来ます。

読み込みに失敗した画像を別の画像に置き換えたりなどの処理で使うことがあります。

サンプルコード
<img class="error_sample" src="https://kinocolog.com/wp-content/uploads/2019/06/jquery_event-320x180.png">
<input type="button" class="error_sample_btn" value="存在しないURLに置き換える">

<script>
$(function(){
    $('.error_sample').on('error', function(){
        alert('存在しない画像を読み込みました！');
    });
    $('.error_sample_btn').click(function(){
        //ボタンを押したら存在しない画像URLを設定する
        $('.error_sample').attr('src', 'https://kinocolog.com/hogehoge.png');
    });
});
</script>

jQueryの主要なイベントメソッドからマイナーなものまでサンプルコード付きでまとめました。

イベント関係で迷ったらこちらのページをご確認頂けると嬉しいです。

以上、jQueryのイベント一覧まとめ、でした。

jQuery