とほほのJavaScript入門(イベント関連)

1998年2月15日版

イベント概要

「マウスをクリックした」「キーを押した」などのイベントが発生した時に、何らかの処理をさせたい場合、次のような方法がある。
(1) HTMLタグにonXxxx="..."を記述する： いろいろなタグの属性に、onClick="..." や onMouseOver="..." などのイベントハンドラを指定することができる。どのタグでどんなイベントを指定できるかは「HTMLサポート状況一覧」を参照。
    <HTML>
    <BODY>
    <FORM>
    <INPUT TYPE=button onClick="alert('onClick')">
    </FORM>
    </BODY>
    </HTML>
<A HREF="～">タグにはonClickやonMouseOverなど多くのイベントハンドラを指定できる。IE4.0/NN3.0以降では、onClick="..."の最後に return false をつけると、<A>タグの本来の動作(ジャンプ)を抑制することができる。
    <A HREF="#" onClick="alert('HEHE')">XXX</A>
    <A HREF="xxx.htm" onClick="alert('HEHE'); return false">XXX</A>
(2) captureEvents()を利用する： NN4.0以降では、captureEvents()を使用してイベントをハンドリングできる。captureEvent()の引数には、Event.CLICK | Event.FOCUS のようにイベント名を | で区切って指定する。イベント発生時、指定した関数(イベントハンドラ)が呼ばれる。
    <HTML>
    <HEAD>
    <SCRIPT>
    window.captureEvents(Event.CLICK);
    window.onClick = func;
    function func(e) {
       alert(e.type);
    }
    </SCRIPT>
    <BODY>
    </BODY>
    </HTML>

イベントハンドラ

NNで使用可能なイベントは下記の通り。イベントは次のような形式で指定する。
    <INPUT TYPE=button onClick="alert('xxx')">
どのタグでどのイベントが使用可能かは「HTMLサポート状況一覧」を参照。

onLoad
ページが読込まれた時。

onUnload
他のページに移動する時。

onAbort
イメージの読込みが中断された時。

onError
読込みが失敗した時。

onMove
ウィンドウを移動した時。

onResize
ウィンドウがリサイズされた時。

onDragDrop
ファイルなどがドラッグ＆ドロップされたとき。

onFocus
フォーカスを得た時。

onBlur
フォーカスを失った時。

onSubmit
サブミットボタンが押された時。

onReset
リセットボタンが押された時。

onClick
クリックされた時に発生

onDblClick
ダブルクリックされた時。

onKeyDown
キーが押された時。

onKeyPress
キーが押されたままでオートリピートが発生した時。

onKeyUp
キーが離された時。

onMouseDown
マウスボタンが押された時。

onMouseUp
マウスボタンが離された時。

onMouseOver
マウスが上に来た時。

onMouseOut
マウスが離れた時。

onMouseMove
マウスが移動した時。

onChange
フォームの内容が変更された時(実際には、変更後フォーカスが移動した時)。

onSelect
テキストが選択された時。Windows版NNでは未実装？

イベントオブジェクト

captureEvents()で指定したイベントが捕獲された際に呼ばれるイベントハンドラには、イベントオブジェクトが引数として渡される。

event (N4)
イベントハンドラの引数として渡されるイベントオブジェクト。

event.target (N4)
最初にイベントが送られたオブジェクト。イメージオブジェクトやボタンオブジェクトなど。

event.type (N4)
イベントタイプを"click"などの文字列で表す。

event.data (N4)
DragDropの際、ドラッグ＆ドロップしたオブジェクト(ファイルなど)のURLを示す文字列の配列。・・・・と説明はあるのだが、使い方がよく分からない。

event.which (N4)
どのマウスボタンが押されたかを示す。 1が左ボタン、2が(あれば)真ん中ボタン、3が右ボタン。

event.modifiers (N4)
イベント発生時にどの特殊キーが押されていたかを示す。 Windowsの場合はALT(1),CTRL(2),SHIFT(4),META(8)の、Macintoshの場合はOption(1),Ctrl(2),Shift(4),Command(8)の論理和(or)が値となる。

event.height (N4)
イベントが発生したウィンドウ(フレーム)上のX位置。

event.width (N4)
イベントが発生したウィンドウ(フレーム)上のY位置。

event.layerX (N4)
イベントが発生したレイヤ上のX位置。

event.layerY (N4)
イベントが発生したレイヤ上のY位置。

event.pageX (N4)
イベントが発生したページ上のX位置。

event.pageY (N4)
イベントが発生したページ上のY位置。

event.screenX (N4)
イベントが発生したスクリーン上のX位置。

event.screenY (N4)
イベントが発生したスクリーン上のY位置。