Atelierで“event”タグの付いているブログ記事

2008年4月19日

隠居のお勉強:JavaScript(10) event

 ちょっとサボっていた W3Schools の JavaScript のお勉強を再開した。じつは順序に従って、for..in という構文の学習していたのだが、example の文法がよく理解できない。あとで学習する object のときにも出てくるようなので、スキップすることにした。 object がよく理解できていないことが原因のようなので、その学習の中で理解していくことにした。

 それで今回は、次のステップである 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>

 このコードを実行すると次のようになる。Copy Text ボタンをクリックしてみてください。

Field1:
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