イベントとは、
ユーザがアプリケーションに対して何らかのアクションを掛けたときのことを表します。
例えば・・・
・ボタンを押す
・マウスでクリックする
・キーボードでタイプする
・・・などのことです。
jQueryを使って、
これらのイベントをどのようにして判断するのか？を学びます。
各要素に埋め込んで、
捕捉できるイベントは21個ありますので、
1つずつサンプルを上げながら確認していきたいと思います。
（アルファベット順）
1.blur
| 説明 | 要素がフォーカス（マウスやタブキー）を失ったタイミングで発生 |
|---|---|
| サンプルソース |
$(function() {
// ↓要素に対して捕捉するイベントを指定
$("input").blur(function(){
// ・・・イベント発生後の処理・・・
});
});
|
| イベント発生源 | |
| 確認エリア | ※イベントが発生するとログが出力されます。 |
2.change
| 説明 | 要素がフォーカスを得て値の修正が完了したタイミングで発生 |
|---|---|
| サンプルソース |
$(function() {
// ↓要素に対して捕捉するイベントを指定
$("input").change(function(){
// ・・・イベント発生後の処理・・・
});
});
|
| イベント発生源 | |
| 確認エリア | ※イベントが発生するとログが出力されます。 |
3.click
| 説明 | クリックされた時 |
|---|---|
| サンプルソース |
$(function() {
// ↓要素に対して捕捉するイベントを指定
$("input").click(function(){
// ・・・イベント発生後の処理・・・
});
});
|
| イベント発生源 | |
| 確認エリア | ※イベントが発生するとログが出力されます。 |
4.dblclick
| 説明 | ダブルクリックされた時 |
|---|---|
| サンプルソース |
$(function() {
// ↓要素に対して捕捉するイベントを指定
$("input").dblclick(function(){
// ・・・イベント発生後の処理・・・
});
});
|
| イベント発生源 | |
| 確認エリア | ※イベントが発生するとログが出力されます。 |
5.error
| 説明 | JavaScriptのエラーが発生したタイミングで発生 |
|---|---|
| サンプルソース |
$(function() {
// ↓「error()」でわざとエラーを発生させています。
$("input[type=button]").click(function(){
$("input").error();
});
// ↓要素に対して捕捉するイベントを指定
$("input").error(function(){
// ・・・イベント発生後の処理・・・
});
});
|
| イベント発生源 | |
| 確認エリア | ※イベントが発生するとログが出力されます。 |
本日は
blur、change、click、dblclick、error
の5本を学びました。
changeイベントは入力を完了したタイミングで、
入力内容の妥当性を検証するときなどで使えそうですね。
それでは、また。
