隠居のお勉強：JavaScript(10) event
ちょっとサボっていた W3Schools の JavaScript のお勉強を再開した。じつは順序に従って、for..in という構文の学習していたのだが、example の文法がよく理解できない。あとで学習する object のときにも出てくるようなので、スキップすることにした。 object がよく理解できていないことが原因のようなので、その学習の中で理解していくことにした。
それで今回は、次のステップである event の勉強である。
Web ページの全ての要素（element）は、JavaScript 関数(function) のトリガーであるイベント(event）となる。例えば、ボタン element の onClick event は、ボタンをクリックすると実行される関数を指示する場合に使用される。イベント(event）は、HTMLタグの中で定義する。
event には次のようなものがある。
event は通常、関数との組み合わせで使用される。関数は、event が発生する前には実行されない。
例えば、 onClick event は次のように使われる。
このコードを実行すると次のようになる。Copy Text ボタンをクリックしてみてください。
JavaScript で認められている event の一覧を、英語であるが W3Schools から引用加工させていただいて、下のテーブルに記載した。
詳細は、W3Schools の complete Event reference にある。それぞれの event の使い方を詳しく説明している。
それで今回は、次のステップである event の勉強である。
Web ページの全ての要素（element）は、JavaScript 関数(function) のトリガーであるイベント(event）となる。例えば、ボタン element の onClick event は、ボタンをクリックすると実行される関数を指示する場合に使用される。イベント(event）は、HTMLタグの中で定義する。
event には次のようなものがある。
- マウス・クリック
- Web ページあるいはイメージのロード
- Web ページ上のホットスポットにカーソルが乗る。
- HTML form で input box が選択される。
- HTML form をサブミットする。
- 何らかのキーが叩かれる。
event は通常、関数との組み合わせで使用される。関数は、event が発生する前には実行されない。
例えば、 onClick event は次のように使われる。
Field1: <input type="text" id="field1" value="おはよう!!">
Field2: <input type="text" id="field2">
Click the button below to copy the content of Field1 to Field2.
<button onclick="document.getElementById('field2').value= document.getElementById('field1').value">Copy Text</button>
Field2: <input type="text" id="field2">
Click the button below to copy the content of Field1 to Field2.
<button onclick="document.getElementById('field2').value= document.getElementById('field1').value">Copy Text</button>
このコードを実行すると次のようになる。Copy Text ボタンをクリックしてみてください。
Field1:
Field2:
Click the button below to copy the content of Field1 to Field2.
Field2:
Click the button below to copy the content of Field1 to Field2.
JavaScript で認められている event の一覧を、英語であるが W3Schools から引用加工させていただいて、下のテーブルに記載した。
詳細は、W3Schools の complete Event reference にある。それぞれの event の使い方を詳しく説明している。
| Attribute | The event occurs when... |
|---|---|
| onabort | Loading of an image is interrupted |
| onblur | An element loses focus |
| onchange | The user changes the content of a field |
| onclick | Mouse clicks an object |
| ondblclick | Mouse double-clicks an object |
| onerror | An error occurs when loading a document or an image |
| onfocus | An element gets focus |
| onkeydown | A keyboard key is pressed |
| onkeypress | A keyboard key is pressed or held down |
| onkeyup | A keyboard key is released |
| onload | A page or an image is finished loading |
| onmousedown | A mouse button is pressed |
| onmousemove | The mouse is moved |
| onmouseout | The mouse is moved off an element |
| onmouseover | The mouse is moved over an element |
| onmouseup | A mouse button is released |
| onreset | The reset button is clicked |
| onresize | A window or frame is resized |
| onselect | Text is selected |
| onsubmit | The submit button is clicked |
| onunload | The user exits the page |