「jQueryのready、セレクタ、メソッドチェーンの構文の記述方法」でjQueryの記述方法について説明しましたが、今回はjQueryのイベント処理について説明します。
Queryのバージョンには、1.X系、2.X系、3.X系があり、このバージョンの違いは次のようになっています。
- 1.X系はIE8以前をサポートする
- 2.X系はIE9以降をサポートする
- 2.X系と3.X系のサポートブラウザに差はない（2017年5月時点）
.minは軽量化したファイル
.slimは一部の機能をカットした軽量版
3.X系は再設計されて処理の呼び出しなどが異なる
ダウンロードは「jQuery Core – All Versions」からできます。そのほかに、「CDN」と呼ばれる、インターネット経由でファイルを配信する仕組みを持ち、利用可能なCDNを次に示します。
jQueryイベント一覧
jQueryでは、要素のイベントに実行させたい関数をひも付けます。主要なイベントを次に示します。なおすべてのイベントの一覧については、「jQuery 1.9 Events」を参照してください。
| イベント名 | イベント発生タイミング |
|---|---|
| blur() | 対象要素からフォーカスが離れた |
| change() | 対象要素の値が変更された |
| click() | クリック |
| dblclick() | ダブルクリック |
| focus() | 対象要素にフォーカスが当たった |
| keydown() | キーを押し下げた |
| keypress() | キーを押した |
| mousedown() | マウスボタンを押し下げた |
| mousemove() | マウスを移動させた |
| off() | イベントを解除する |
| on() | イベントを設定する |
| select() | 要素のselectイベントにバインドします。また、selectイベントを実行します。 |
| submit() | SUBMITが実行される直前 |
clickイベント
clickイベントに関数をひも付ける方法については、すでに「jQueryのready、セレクタ、メソッドチェーンの構文の記述方法」で次のように説明しました。
$("div").click(function () {
...
}
次のようにclickイベントに関数をひも付けない場合は、対象となる要素がクリックされた時と同じ動作を実行させることが可能です。
$("div").click()
functionの引数にオブジェクト「obj 」を渡すときには、次の形式指定すれば、任意のデータを渡すことができます。実行すると、「tomosoft」がconsolに表示されます。関数の引数「e」に対して、「data.name」とチェーンを繋げてオブジェクトの「name」を取得します。
var obj = {
id: 100,
name: 'tomosoft'
}
$("div").click(obj, function(e) {
console.log( e.data.name );
}
onイベント
click()メソッドは、マウスのクリック操作だけですが、onイベントは、キー操作のイベント、フォーカスのイベントなど複数のイベントが同時に発生したときを条件とすることができます。
次に示す例では、対象要素にフォーカスが当たりクリックされた時にイベント処理が実行されるようになります。
$('div').on('click focus', function() {
console.log('イベントが実行されました！');
})