≪ 目次　＜ 名前順要素一覧　［ 戻る ］　使用例 ↓

バナー

中年おっちゃんでも出来た ウェブページ作成講座 with ? mark

events イベント

events
クリック等の動作でイベントが発生した時に、スクリプトを起動します。
  • events に定義されている属性は、全てのブラウザが全て実行出来るとはかぎりません。
  • スクリプトを使用する場合は、HEAD要素内に、

    <meta http-equiv="Content-Script-Type" content="text/javascript" />


    と meta要素で基準スクリプト言語の指定を記述する必要があります。
使用上の注意（私見）

W3C → XHTML 1.0 → Multi-part XHTML file → DTDs → XHTML-1.0-Transitional より
onmouseover のコメントは HTML 4.01 Strict DTD より引用しています。

<!-- attributes for common UI events
  onclick     a pointer button was clicked
  ondblclick  a pointer button was double clicked
  onmousedown a pointer button was pressed down
  onmouseup   a pointer button was released
  onmouseover a pointer was moved onto
  onmousemove a pointer was moved onto the element
  onmouseout  a pointer was moved away from the element
  onkeypress  a key was pressed and released
  onkeydown   a key was pressed down
  onkeyup     a key was released -->
<!ENTITY % events
 "onclick     %Script;       #IMPLIED
  ondblclick  %Script;       #IMPLIED
  onmousedown %Script;       #IMPLIED
  onmouseup   %Script;       #IMPLIED
  onmouseover %Script;       #IMPLIED
  onmousemove %Script;       #IMPLIED
  onmouseout  %Script;       #IMPLIED
  onkeypress  %Script;       #IMPLIED
  onkeydown   %Script;       #IMPLIED
  onkeyup     %Script;       #IMPLIED"  >

onclick属性 ⇒ 使用例

onclick     %Script;       #IMPLIED

要素の上で、ポインティングデバイスのボタンがクリックされた時の動作。onkeypress属性と対で使用します。省略可。

ondblclick属性 ⇒ 使用例

ondblclick  %Script;       #IMPLIED

要素の上で、ポインティングデバイスのボタンがダブルクリックされた時の動作。省略可。

onmousedown属性 ⇒ 使用例

onmousedown %Script;       #IMPLIED

要素の上で、ポインティングデバイスのボタンが押し下げられた時の動作。onkeydown属性と対で使用します。省略可。

onmouseup属性 ⇒ 使用例

onmouseup   %Script;       #IMPLIED

要素の上で、ボタンが放された時の動作。onkeyup属性と対で使用します。省略可。

onmouseover属性 ⇒ 使用例

onmouseover %Script;       #IMPLIED

ポインタが要素の上に移動してきた時の動作。省略可。

onmousemove属性 ⇒ 使用例

onmousemove %Script;       #IMPLIED

ポインタが要素の上を移動する時の動作。省略可。

onmouseout属性 ⇒ 使用例

onmouseout  %Script;       #IMPLIED

ポインタが要素から外れた時の動作。省略可。

onkeypress属性 ⇒ 使用例

onkeypress  %Script;       #IMPLIED

要素の上で、キーが押し放たれた時の動作ですが、BUTTON要素で使用する場合、ほとんどのブラウザでonkeydown属性と同じ動作をするようです。onclick属性と対で使用します。省略可。

onkeydown属性 ⇒ 使用例

onkeydown   %Script;       #IMPLIED

要素の上で、キーが押された時の動作。onmousedown属性と対で使用します。省略可。

onkeyup属性 ⇒ 使用例

onkeyup     %Script;       #IMPLIED

要素の上で、キーが押し放された時の動作。onmouseup属性と対で使用します。省略可。

使用例

　XXXX　　はHTMLサンプルです。

　XXXX　　はHTMLサンプルの表示例です。

onclick と onkeypress は対で使用します。

HTML記述
<p>
<button type="button" accesskey="q" tabindex="1"
onclick="alert('onclick')" onkeypress="alert('onkeypress')">
このボタンを選択し、その後に何かキーを押して下さい。 (Q)
</button>
</p>
表示例

クリックの場合、クリックが終了する（ボタンを押して、外す）までスクリプトが実行されませんが、キー入力の場合、ブラウザにより、キーを押し下げただけでスクリプトが開始されてしまいます（onkeypress属性と同じ動作）。

ondblclick

HTML記述
<p>
<button type="button" accesskey="w" tabindex="2"
ondblclick="alert('ondblclick')">
このボタンの上でダブルクリックをして下さい。 (W);
</button>
</p>
表示例

onmousedown と onkeydown は対で使用します。

HTML記述
<p>
<button type="button" accesskey="e" tabindex="3"
onmousedown="alert('onmousedown')" onkeydown="alert('onkeydown')">
このボタンを選択し、その後に何かキーを押して下さい。 (e)
</button>
</p>
表示例

onmouseup と onkeyup は対で使用します。 は対で使用します。

HTML記述
<p>
<button type="button" accesskey="r" tabindex="4"
onmouseup="alert('onmouseup')" onkeyup="alert('onkeyup')">
このボタンを選択し、その後に何かキーを押して下さい。 (R)
</button>
</p>
表示例

onmouseover/onmousemove/onmouseout

HTML記述
<p>
onmouseover="this.style.backgroundColor='#eff'"
onmousemove="this.style.backgroundColor='#88f'"
onmouseout="this.style.backgroundColor=''">
この上にカーソルを乗せて下さい。背景の色が変わります。
</p>
表示例
この上にカーソルを乗せて下さい。背景の色が変わります。

使用上の注意（私見）

onmouseover属性は、ポインタが要素に触れただけでスクリプトが開始されてしまいます。

onmousedown と onkeydown属性は、キーやボタンを押し下げると同時にスクリプトが開始されます。

onkeypress属性は、ほとんどのブラウザでonkeydown属性と同じ動作をしてしまいます。

これらの属性を使用すると、閲覧者の予期しない動作が始まってしまい、選択の余地を与えません。

等の配慮が必要だと思います。

onclick と onkeypress , onmouseup と onkeyup は、何故対で使用しないといけないのでしょうか？

全ての方が、マウスを使用しているとは限りません。音声入力等の代替キーボードによって操作されている方もおられます。閲覧者の装置に依存しない入力を実現する為です。

これらの属性は全てのブラウザが全て実行出来るとはかぎりません。

≪ 目次　＜ 名前順要素一覧　［ 戻る ］　Top ↑

Created：Jun 01, 2005 Updated：Oct.,25,2011 © by おっちゃん
Oct.,25,2011 全面更新