6.focus
| 説明 | 要素がフォーカス（マウスやタブキー）を得たタイミングで発生 |
|---|---|
| サンプルソース |
$(function() {
// ↓要素に対して捕捉するイベントを指定
$("input").focus(function(){
// ・・・イベント発生後の処理・・・
});
});
|
| イベント発生源 | |
| 確認エリア | ※イベントが発生するとログが出力されます。 |
7.keydown
| 説明 | いずれかのキーが押し下げられたタイミングで発生 |
|---|---|
| サンプルソース |
$(function() {
// ↓要素に対して捕捉するイベントを指定
$("input").keydown(function(){
// ・・・イベント発生後の処理・・・
});
});
|
| イベント発生源 | |
| 確認エリア | ※イベントが発生するとログが出力されます。 |
8.keypress
| 説明 | いずれかのキーが押されたタイミングで発生 |
|---|---|
| サンプルソース |
$(function() {
// ↓要素に対して捕捉するイベントを指定
$("input").keypress(function(){
// ・・・イベント発生後の処理・・・
});
});
|
| イベント発生源 | |
| 確認エリア | ※イベントが発生するとログが出力されます。 |
9.keyup
| 説明 | いずれかのキーが押された後、上がったタイミングで発生 |
|---|---|
| サンプルソース |
$(function() {
// ↓要素に対して捕捉するイベントを指定
$("input").keyup(function(){
// ・・・イベント発生後の処理・・・
});
});
|
| イベント発生源 | |
| 確認エリア | ※イベントが発生するとログが出力されます。 |
10.load
| 説明 | ドキュメント内の全リソースの読み込みが完了したときに発生 |
|---|---|
| サンプルソース |
$(function() {
// ↓他と異なり、windowでloadイベントが捕捉できる
$(window).load(function(){
// ・・・イベント発生後の処理・・・
});
});
|
| イベント発生源 | （このページをリロードしてください） |
| 確認エリア | ※イベントが発生するとログが出力されます。 |
本日は
focus、keydown、keypress、keyup、load
の5本を学びました。
key***イベントは、
それぞれ発生するタイミングが違うので注意が必要です。
また、loadイベントはwindow要素に対して働く点は他のイベントと異なります。
それでは、また。
