## イベントハンドラ

[up] [prev] [next]

#### ■ 一覧

onClick, onDblClick, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseUp, onMouseOver, onMouseOut, onMouseMove, onLoad, onUnload, onFocus, onBlur, onSubmit, onReset, onChange, onResize, onMove, onDragDrop, onAbort, onError, onSelect

#### ■ イベントハンドラ

イベントハンドラはタグの属性部分に指定します。例えば、ボタンをクリックした時に JavaScript を実行する場合は以下のようにします。ブラウザの種類やバージョンによって、各タグで使用可能なイベントハンドラは異なります。

    <form action="#">
    <input type="button" value="OK" onclick="alert('OK!!')">
    </form>

JavaScript の文法に従い、セミコロン（;）で区切ることにより、複数の文を呼び出すことも可能です。

    <form action="#">
    <input type="button" value="OK" onclick="alert('A'); alert('B')">
    </form>

イベントハンドラから関数を呼び出すこともできます。関数は通常、<head>〜</head> の間で定義します。

    <html>
    <head>
    <title>テスト</title>
    <script type="text/javascript">
    <!--
    function kansuu() {
        alert("OK!!");
    }
    // -->
    </script>
    </head>
    <body>
    <form action="#">
    <input type="button" value="OK" onclick="kansuu()">
    </form>
    </body>
    </html>

<a> や <input type="submit"> で onClick を使用する際などは、イベントハンドラの戻り値として false を返すことにより、本来の動作（クリック時の動作など）を無効化することができます。

    <script type="text/javascript">
    <!--
    function kakunin() {
        if (window.confirm("よろしいですか？")) {
            return true;
        } else {
            return false;
        }
    }
    // -->
    </script>

    <a href="xxx.htm" onclick="return kakunin()">XXX</a>

    <form action="xxx.cgi">
    <input type="submit" value="OK"
           onclick="return kakunin('OK');">
    </form>

#### ■ 各種イベントハンドラ

◆ onclick=scripts (e3/N2)
◆ ondblclick=scripts (e4/N4)

クリックされた時（onclick）、ダブルクリックされた時（ondblclick）に発生します。Internet Explorer 4.0 以降や Netscape 6 以降では <b> や <img> など大半のタグに指定することができますが、古いブラウザでは、<a>、<area> や、<input> タグによるボタンにのみ指定できます。

    <form action="#">
    <input type="button" value="OK" onclick="alert('OK')">
    </form>

◆ onkeydown=scripts (e4/N4)
◆ onkeypress=scripts (e4/N4)
◆ onkeyup=scripts (e4/N4)

キーが押された時（onkeydown）、キーがしばらく押された時（onkeypress）、押されたキーが離された時（onkeyup）に発生します。

    <form action="#">
    <input type="text" onkeypress="alert('OK')">
    </form>

◆ onmousedown=scripts (e4/N4)
◆ onmouseup=scripts (e4/N4)
◆ onmouseover=scripts (e3/N2)
◆ onmouseout=scripts (e4/N3)
◆ onmousemove=scripts (e4/N4)

マウスボタンが押された時（onmousedown）、マウスボタンが離された時（onmouseup）、マウスカーソルがそのオブジェクトの上に乗った時（onmouseover）、マウスカーソルがそのオブジェクトの上から離れた時（onmouseout）マウスカーソルが移動した時（onmousemove）に発生します。

    <a href="#"
       onmouseover="alert('OVER')"
       onmouseout="alert('OUT')"><img alt="xxx"
       src="xxx.gif" height=100 width=100></a>

◆ onload=scripts (e3/N2)
◆ onunload=scripts (e3/N2)

ページが読込まれた時（onload）、他のページに移動する時（onunload）に発生します。

    <body onload="alert('Hello')" onunload="alert('Bye')">

◆ onfocus=scripts (e3/N2)
◆ onblur=scripts (e3/N2)

その部品がクリックされるなどして、選択された状態になることを「フォーカスがあたる」といいます。これらのイベントは、フォーカスを得た時（onfocus）、フォーカスを失った時（onblur）に発生します。

    <form action="#">
    <input type="text" onfocus="alert('Hello')">
    </form>

◆ onsubmit=scripts (e3/N2)
◆ onreset=scripts (e4/N3)

フォームがサブミットされた時（onsubmit）、フォームがリセットされた時（onreset）に発生します。onsubmit="..."、onreset="..." の戻り値として false を返すことにより、サブミットボタン、リセットボタンの本来の動作を無効化することができます。

    <form action="xxx.cgi" onsubmit="return kakunin()">
    <input type="text" name="WORD">
    <input type="submit" value="OK">
    </form>

◆ onchange=scripts (e3/N2)

フォーム部品の内容が変更された時や、フォーム部品の内容が変更されて、別のフォーム部品にフォーカスが移動した時に発生します。

    <form action="#">
    <select onchange="alert('changed!!')">
    <option>AAA</option>
    <option>BBB</option>
    </select>
    </form>

◆ onresize=scripts (e4/N4)
◆ onmove=scripts (N4)

ウィンドウがリサイズされた時（onresize）、ウィンドウが移動された時（onmove）に発生します。

    <body onresize="alert('Resize')" onmove="alert('Move')">

◆ ondragdrop=scripts (N4)

ファイルがウィンドウにドラッグ＆ドロップされたときに発生します。ドロップされたファイルの URL を得るには event.data を参照しますが、セキュリティの設定を変更しておく必要があります。

    <body ondragdrop="alert(event.type)">

◆ onabort=scripts (e4/N3)

イメージの読込みが中断された時に発生します。<img> タグに対して指定します。

◆ onerror=scripts (e4/N3)

読込みが失敗した時に発生します。<body>、<img> などのタグに指定します。

    <img src="xx.gif" alt="xx" onerror="alert('画像読みこみ失敗!')">

◆ onselect=scripts (e3/N2)

テキストが選択された時に発生します。

[up] [prev] [next]
Copyright (C) 1996-2001 杜甫々
改訂版初版：2001年5月20日
http://www.tohoho-web.com/js/onevent.htm