JavaScriptのイベントハンドラ一覧｜イベント｜JavaScript/DOM

TOP JavaScript/DOMJavaScriptのイベントハンドラ一覧

イベントハンドラ一覧
onBlur／onFocus〔フォーカスが移動した時に処理を行う〕
onChange〔フォームの入力値、選択が変更されたときに処理を行う〕
onSelect／onSelectStart〔テキストが選択された時に処理を行う〕
onSubmit／onReset〔フォームの送信時、リセット時に処理を行う〕
onAbort／onError〔画像読み込み時に処理を行う〕
onLoad／onUnload〔ページ読み込み時、ページの切り替え時に処理を行う〕
onClick／onDblClick〔クリック、ダブルクリックされた時に処理を行う〕
onKeyPress／onKeyDown／onKeyUp〔キーの状態に応じて処理を行う〕
onMouseOut／onMouseOver／onMouseDown／onMouseUp〔マウスを乗せたり離した時、マウスでクリックした時に処理を行う〕
onMousemove〔マウスを動かしている時に処理を行う〕
onDragDrop ※NN4のみ〔マウスでドラッグ＆ドロップした時に処理を実行〕

イベントハンドラ一覧

unknown

イベントは、マウスボタンをクリックした、ページが読み込まれたなどの動作が起こった時に発生します。 イベントハンドラは、このイベントを検出し、イベントに処理を与えるのに使用します。イベントハンドラによって、発生したイベントごとに処理を実行することができます。

イベントハンドラ一覧
イベントハンドラ	説明
onBlur	ページやフォーム要素からフォーカスが外れた時に発生
onFocus	ページやフォーム要素にフォーカスが当たった時に発生
onChange	フォーム要素の選択、入力内容が変更された時に発生
onSelect	テキストが選択された時に発生
onSelectStart	ページ内の要素が選択されようとした時に発生　※IEのみ
onSubmit	フォームを送信しようとした時に発生
onReset	フォームがリセットされた時に発生
onAbort	画像の読み込みを中断した時に発生
onError	画像の読み込み中にエラーが発生した時に発生
onLoad	ページや画像の読み込みが完了した時に発生
onUnload	ウィンドウを閉じた時、他のページに切り替えた時、ページをリロード（更新）した時に発生
onClick	要素やリンクをクリックした時に発生
onDblClick	要素をダブルクリックした時に発生
onKeyUp	押していたキーをあげた時に発生
onKeyDown	キーを押した時に発生
onKeyPress	キーを押してる時に発生
onMouseOut	マウスが離れたした時に発生
onMouseOver	マウス乗った時に発生
onMouseUp	クリックしたマウスを上げた時に発生
onMouseDown	マウスでクリックした時に発生
onMouseMove	マウスを動かしている時に発生
onDragDrop	マウスでドラッグ＆ドロップした時に発生　※NN4のみ

onBlur／onFocus
フォーカスが移動した時に処理を行う

unknown

イベントハンドラ	説明
onBlur	ページやフォーム要素からフォーカスが外れた時に発生
onFocus	ページやフォーム要素にフォーカスが当たった時に発生

onBlur／onFocusイベントを指定できる要素は、a要素、area要素、label要素、input要素、select要素、textarea要素、button要素のみです。

onBlurの使用例

テキストボックスからフォーカスが外れた時に、数値チェック

<script type="text/javascript">
    function isRegNum(obj){
        /* 入力値 */
        var str=obj.value;
        /* 数値以外の文字列が含まれていた場合 */
        if(str.match(/[^0-9]/g)){
            /* アラート表示 */
            alert (str.match(/[^0-9]/g)+'\n\n年齢は半角数値で入力して下さい');
            /* テキストボックスを空にする */
            obj.value="";
            return false;
        }
    }
</script>

<form action="#">
    年齢：<input type="text" value="" onblur="isRegNum(this)" size="3" maxlength="2" /> 歳<br>
    ※半角数値以外を入力するとフォーカスが外れた時にアラートが表示されます。
</form>

フォーカスを当ててもフォーカスが外れるテキストボックス

<form action="#">
    <input type="text" onfocus="this.blur()" value="フォーカスを当ててもフォーカスが外れるテキストボックス" size="60" /><br>
    <textarea cols="65" rows="5" onFocus="this.select()">
フォーカスを当てると、テキストエリア内のテキストが選択されます。
フォーカスを当てると、テキストエリア内のテキストが選択されます。
フォーカスを当てると、テキストエリア内のテキストが選択されます。
    </textarea>
</form>

onChange
フォームの入力値、選択が変更されたときに処理を行う

unknown

イベントハンドラ	説明
onChange	フォーム要素の選択、入力内容が変更された時に発生

onChangeイベントを指定できる要素は、input要素、select要素、textarea要素のみです。

onChangeの使用例

プルダウンの選択項目を変更した時に選択した項目をアラート表示

<form action="#">
    <select onchange="alert(this.options[this.options.selectedIndex].text)">
        <option value="">▼選択してください</option>
        <option value="apple">りんご</option>
        <option value="banana">バナナ</option>
    </select>
</form>

テキストボックスに数値以外が入力されたらアラートを出す

<script type="text/javascript">
    function isRegNum(obj){
        var str=obj.value; /* 入力値 */
        if(str.match(/[^0-9]/g)){ /* 数値以外の文字列が含まれていた場合 */
            alert (str.match(/[^0-9]/g)+'\n\n数値以外が含まれています'); /* アラート表示 */
            obj.value=""; /* テキストボックスを空にする */
            return false;
        }
    }
</script>

<form action="#">
    <!-- 郵便番号入力欄 -->
    〒：
    <input type="text" size="5" maxlength="3" onchange="isRegNum(this)" />
     - 
    <input type="text" size="4" maxlength="3" onchange="isRegNum(this)" /><br>
    ※半角数値以外を入力するとアラートが表示されます。
</form>

onSelect／onSelectStart
テキストが選択された時に処理を行う

unknown

イベントハンドラ	説明	サポート状況
onSelect	テキストが選択された時に発生	IE　Firefox　Netscape
onSelectStart	ページ内の要素が選択されようとした時に発生	IE

onSelect／onSelectStartイベントを指定できる要素は、input要素、textarea要素のみです。

onSelectの使用例

テキストが選択されたら、アラート表示

<form action="#">
    <textarea cols="60" rows="2" onselect="alert('テキストが選択されました')">
このテキストを選択してみて下さい
    </textarea>
</form>

ページ全体の選択を禁止する

サンプルを見る

<body onselectstart="return false;">
    <p>
        このページはbody要素にonselectstart="return false;"を指定し、ページ全体の選択を禁止しています。<br>
        onSelectStartイベントはIE（Internet Explorer）でしかサポートされていません。<br>
        そのため、IE以外のブラウザでは選択できてしまいます。
    </p>
</body>

onSubmit／onReset
フォームの送信時、リセット時に処理を行う

unknown

イベントハンドラ	説明
onSubmit	フォームが送信されそうになった時（送信ボタンをクリックした時）に発生
onReset	フォームがリセットされた時に発生

onSubmit／onResetイベントを指定できる要素は、form要素のみです。

onSubmitの使用例

フォームが送信されそうになった（onSubmitイベント発生）時、フォームの入力チェックを実行し、入力に不備がなければTRUEを返してフォーム送信、不備がある場合はFALSEを返してフォームを送信しない

<script type="text/javascript">
    function chkForm(frmObj){
        var cnt=0;
        for(var i=0; i<frmObj.length; i++){
            if(frmObj.elements[i].type=="radio"){
                if(frmObj.elements[i].checked==true) cnt++;
            }
        }
        if(cnt>0){
            /* 選択されている場合は、TRUEを返してフォーム送信 */
            return true;
        }else{
            /* 選択されていない場合は、アラート表示後、FALSEを返してフォームを送信しない */
            alert("一番好きな果物が選択されていません");
            return false;
        }
    }
</script>

<form action="/content/demo/test.php" method="post" onsubmit="return chkForm(this)">
    一番好きな果物：
    <input type="radio" name="fruit" value="apple" />リンゴ　
    <input type="radio" name="fruit" value="banana" />バナナ　
    <input type="radio" name="fruit" value="grape" />ブドウ
    <input type="submit" value="送信" />
</form>

リセットボタンがクリックされたら、アラート表示

<form action="#" onreset="alert('フォームをリセットします')">
    <p>
        名前：<input type="text" name="name" value="" />
    </p>
    <p>
        性別：
        <input type="radio" name="sex" value="1" />男
        <input type="radio" name="sex" value="2" />女
    </p>
    <p>
        居住エリア：
        <select name="area">
            <option value="">▼選択して下さい</option>
            <option value="hokkaido">北海道</option>
            <option value="honsyu">本州</option>
            <option value="shikoku">四国</option>
            <option value="kyusyu">九州</option>
            <option value="okinawa">沖縄</option>
        </select>
    </p>
    <p>
        ペットの有無：
        <input type="checkbox" name="pet" value="1" />いる
    </p>
    <p>
        <input type="reset" value="リセット" />
    </p>
</form>

onAbort／onError
画像読み込み時に処理を行う

unknown

イベントハンドラ	説明
onAbort	画像の読み込みを中断した時に発生
onError	画像の読み込み中にエラーが発生した時に発生

onAbortの使用例

サンプルを見る

画像の読み込みが完了しない内に、ブラウザの「中止ボタン」をクリックすると、onAbortイベントが発生します。<br>
<img src="/content/img/pic1.png" onabort="alert('画像の読み込みが中断されました')" />

onErrorの使用例

サンプルを見る

<script type="text/javascript">
    function fError(obj){
        alert("画像読み込み中に、エラーが発生しました\n\n代わりにデフォルトの画像を表示します");
        obj.src="/content/img/js/noimage.gif";
    }
</script>

<form action="#">
    <p>
        存在しない画像URLを指定した場合は、エラーが発生します。<br>
        <img id="image" src="/content/img/noexist.gif" onerror="fError(this)" />
    </p>
</form>

onLoad／onUnload
ページ読み込み時、ページの切り替え時に処理を行う

unknown

イベントハンドラ	説明
onLoad	ページや画像の読み込みが完了した時に発生
onUnload	ウィンドウを閉じた時、他のページに切り替えた時、ページをリロード（更新）した時に発生

onLoad／onUnloadイベントを指定できる要素は、body要素、frameset要素のみです。

onLoad、onUnloadの使用例

サンプルを見る

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>JavaScript: onloadイベント、onunloadイベント</title>
        <meta http-equiv="Content-Language" content="ja" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <script type="text/javascript">
            /* onloadイベント発生した時に行う処理を記述 */
            function init() {
                alert("ページが読み込まれました");
            }
            /* onunloadイベントが発生した時に行う処理を記述 */
            function init2() {
                alert("ページがアンロードされました");
            }
        </script>
    </head>
    <body onload="init()" onunload="init2()">
        <p>
            ページの読み込み完了時に、onLoadイベントが発生します。<br>
            ページを閉じた時やリロード（更新）した時に、onUnloadイベントが発生します。
        </p>
        <p>
            <input type="button" value="リロード(更新）する" onclick="window.location.reload()" />
            <input type="button" value="閉じる" onclick="self.close()" />
        </p>
    </body>
</html>

onClick／onDblClick
クリック、ダブルクリックされた時に処理を行う

unknown

イベントハンドラ	説明
onClick	要素やリンクをクリックした時に発生
onDblClick	要素をダブルクリックした時に発生

onClickの使用例

<script type="text/javascript">
    function btnClick(obj){
        alert(obj.value);
    }
</script>

<form action="#">
    <input type="button" name="btn" value="クリック" onclick="btnClick(this)" />
</form>

onDblClickの使用例

<form action="#">
    <input type="text" value="ダブルクリックして下さい" 
        ondblclick="alert('ダブルクリックされました')" />
</form>

onKeyPress／onKeyDown／onKeyUp
キーの状態に応じて処理を行う

unknown

イベントハンドラ	説明
onKeyUp	押していたキーをあげた時に発生
onKeyDown	キーを押した時に発生
onKeyPress	キーを押してる時に発生

onKeyUpの使用例

【郵便番号の入力フォーム】1桁入力するたびにフォーカスが次のテキストボックスに移動する

<script type="text/javascript">
    function nextFocus(elm, max) {
        var next_elm = eval(elm+1);
        if (document.zip.elements[elm].value.length >= max) {
            /* テキストボックスにmaxlength文字入力されていたら */
            /* 次のテキストボックスへ移動 */
            document.zip.elements[next_elm].focus();
        }
    }
</script>

<form action="#" name="zip">〒
    <input type="text" name="t1" onkeyup="nextFocus(0,maxLength)" maxlength="1" size="1" />
    <input type="text" name="t2" onkeyup="nextFocus(1,maxLength)" maxlength="1" size="1" />
    <input type="text" name="t3" onkeyup="nextFocus(2,maxLength)" maxlength="1" size="1" /> - 
    <input type="text" name="t4" onkeyup="nextFocus(3,maxLength)" maxlength="1" size="1" />
    <input type="text" name="t5" onkeyup="nextFocus(4,maxLength)" maxlength="1" size="1" />
    <input type="text" name="t6" onkeyup="nextFocus(5,maxLength)" maxlength="1" size="1" />
    <input type="text" name="t7" maxlength="1" size="1" />
</form>

onKeyDownの使用例

<script type="text/javascript">
function fCopy(frmObj){
    frmObj.elements["copy"].value=frmObj.elements["txt"].value;
}
</script>

<form action="#">
    <p>テキストボックスに、入力した内容をしたのテキストボックスに同時に表示します。</p>
    <p>入力：<input type="text" value="" onkeydown="fCopy(this.form)" onkeyup="fCopy(this.form)" name="txt" size="40" /></p>
    <p>確認：<input type="text" value="" readonly="readonly" name="copy" size="40" style="background-color:#eee; border:1px solid #ccc;" />　※（読取専用）</p>
</form>

onKeyPressの使用例

サンプルを見る

<script type="text/javascript">
    /* onKeyPressイベント発生時 */
    function oKeyPress(e){
        window.status="入力中・・・";
    }
    /* onKeyUpイベント発生時 */
    function oKeyUp(e){
        window.status="";
    }
    document.onkeypress=oKeyPress;
    document.onkeyup=oKeyUp;
</script>

<form action="#">
    <p>
        キーが押されている間、ステータスバーにメッセージを表示します。<br>
        キーを上げている時は、メッセージを表示しません。
    </p>
    <p>
        <input type="text" size="50" />
    </p>
</form>

onMouseOut／onMouseOver／onMouseDown／onMouseUp
マウスを乗せたり離した時、マウスでクリックした時に処理を行う

unknown

イベントハンドラ	説明
onMouseOver	マウスが乗った時に発生
onMouseOut	マウスが離れた時に発生
onMouseUp	マウスで押していたのを離した時に発生
onMouseDown	マウスで押した時に発生

onMouseUpイベント、onMouseDownの使用例

マウスで押されている時、マウスが離れた時で画像ボタンの画像を入れ替える

<script type="text/javascript">
    /* onMouseDownイベント発生した時 */
    function fMouseDown(obj) {
        obj.src="/content/img/pengin_doki.gif";
    }
    /* onMouseUpイベントが発生した時 */
    function fMouseUp(obj) {
        obj.src="/content/img/pengin.gif";
    }
</script>

<form action="#" onsubmit="return false;">
    <p>
        画像ボタンをマウスで押している時（onMouseDown）、
        ボタンからマウスが離れた時（onMouseUp）
        のイベントに応じてボタンの画像を入れ替えます。
    </p>
    <p>
        <input type="image" src="/content/img/pengin.gif" alt="ペンギン" onmousedown="fMouseDown(this)" onmouseup="fMouseUp(this)" />　←Click!!
    </p>
</form>

onMouseOut、onMouseOver、onMouseDownの使用例

ロールオーバーボタン

<script type="text/javascript">
    /* onMouseOverイベント発生時 */
    function m_over(obj) {
        obj.src="/content/img/btn/btn_over.gif";
    }
    /* onMouseDownイベント発生時 */
    function m_down(obj) {
        obj.src="/content/img/btn/btn_on.gif";
    }
    /* onMouseOutイベントが発生時 */
    function m_out(obj) {
        obj.src="/content/img/btn/btn_off.gif";
    }
</script>

<form action="#" onsubmit="return false;">
    <p>
        画像ボタンにマウスが乗った時（onMouseOver）、
        マウスで押した時（onMouseDown）、
        マウスが離れた時（onMouseOut）
        のイベントに応じてボタンの画像を入れ替えます。
    </p>
    <p>
        <input type="image" src="/content/img/btn/btn_off.gif" alt="BUTTON" 
            onMouseOver="m_over(this)" 
            onMouseOut="m_out(this)" 
            onMouseDown="m_down(this)" />
    </p>
</form>

onMousemove
マウスを動かしている時に処理を行う

unknown

イベントハンドラ	説明
onMouseMove	マウスを動かしている時に発生

onMouseMoveの使用例

画像がカーソルを追いかける

サンプルを見る

<script type="text/javascript">
    var id_name="cur";
    var image="/content/img/cur/custom.cur";

    var mouse_x=0;        /* マウスのx座標 */
    var mouse_y=0;        /* マウスのy座標 */

    /* マウスのX,Y座標取得 */
    function getMouseXY(e){
        if(document.all){ /* IE */
            mouse_x=document.body.scrollLeft+event.clientX;
            mouse_y=document.body.scrollTop+event.clientY;
        }else if(document.getElementById){ /* NN,Firefox */
            mouse_x=e.pageX;
            mouse_y=e.pageY;
        }
        /* マウス移動 */
        curMove();
    }
    /* 画像をマウスと一緒に移動 */
    function curMove(){
        if(document.all){ /* IE */
            document.all(id_name).style.posLeft=mouse_x;
            document.all(id_name).style.posTop=mouse_y;
        }else if(document.getElementById){ /* Firefox, Netscape */
            document.getElementById(id_name).style.left=mouse_x+"px";
            document.getElementById(id_name).style.top=mouse_y+"px";
        }
    }
    /* イベントが発生したらマウス移動 */
    if(document.all || document.getElementById){
        document.onmousemove=getMouseXY;
    }
</script>

<style type="text/css">
    #cur { position:absolute; left:-100px; top:-100px; z-index:9999; }
</style>

<div id="cur"><img src="/content/img/cur/custom.cur" alt="" /></div>

onDragDrop ※NN4のみ
マウスでドラッグ＆ドロップした時に処理を実行

unknown

イベントハンドラ	説明	サポート状況
onDragDrop	マウスでドラッグ＆ドロップした時に発生	NN4のみ

onDragDropの使用例

ドラッグ＆ドロップ禁止

サンプルを見る

<script type="text/javascript">
    function fDragDrop(){
        alert("ドラッグ＆ドロップは禁止されています");
    }
    window.ondragdrop=fDragDrop;
</script>

基本 JavaScriptの基本

イベント eventオブジェクト（イベント情報の取得）

イベントJavaScriptのイベントハンドラ一覧

イベントハンドラ一覧

onBlur／onFocusフォーカスが移動した時に処理を行う

onBlurの使用例

テキストボックスからフォーカスが外れた時に、数値チェック

フォーカスを当ててもフォーカスが外れるテキストボックス

onChangeフォームの入力値、選択が変更されたときに処理を行う

onChangeの使用例

プルダウンの選択項目を変更した時に選択した項目をアラート表示

テキストボックスに数値以外が入力されたらアラートを出す

onSelect／onSelectStartテキストが選択された時に処理を行う

onSelectの使用例

テキストが選択されたら、アラート表示

ページ全体の選択を禁止する

onSubmit／onResetフォームの送信時、リセット時に処理を行う

onSubmitの使用例

フォームが送信されそうになった（onSubmitイベント発生）時、フォームの入力チェックを実行し、入力に不備がなければTRUEを返してフォーム送信、不備がある場合はFALSEを返してフォームを送信しない

リセットボタンがクリックされたら、アラート表示

onAbort／onError画像読み込み時に処理を行う

onAbortの使用例

onErrorの使用例

onLoad／onUnloadページ読み込み時、ページの切り替え時に処理を行う

onLoad、onUnloadの使用例

onClick／onDblClickクリック、ダブルクリックされた時に処理を行う

onClickの使用例

onDblClickの使用例

onKeyPress／onKeyDown／onKeyUpキーの状態に応じて処理を行う

onKeyUpの使用例

【郵便番号の入力フォーム】1桁入力するたびにフォーカスが次のテキストボックスに移動する

onKeyDownの使用例

onKeyPressの使用例

onMouseOut／onMouseOver／onMouseDown／onMouseUpマウスを乗せたり離した時、マウスでクリックした時に処理を行う

onMouseUpイベント、onMouseDownの使用例

マウスで押されている時、マウスが離れた時で画像ボタンの画像を入れ替える

onMouseOut、onMouseOver、onMouseDownの使用例

ロールオーバーボタン

onMousemoveマウスを動かしている時に処理を行う

onMouseMoveの使用例

画像がカーソルを追いかける

onDragDrop ※NN4のみマウスでドラッグ＆ドロップした時に処理を実行

onDragDropの使用例

ドラッグ＆ドロップ禁止

関連コンテンツ

onBlur／onFocus
フォーカスが移動した時に処理を行う

onChange
フォームの入力値、選択が変更されたときに処理を行う

onSelect／onSelectStart
テキストが選択された時に処理を行う

onSubmit／onReset
フォームの送信時、リセット時に処理を行う

onAbort／onError
画像読み込み時に処理を行う

onLoad／onUnload
ページ読み込み時、ページの切り替え時に処理を行う

onClick／onDblClick
クリック、ダブルクリックされた時に処理を行う

onKeyPress／onKeyDown／onKeyUp
キーの状態に応じて処理を行う

onMouseOut／onMouseOver／onMouseDown／onMouseUp
マウスを乗せたり離した時、マウスでクリックした時に処理を行う

onMousemove
マウスを動かしている時に処理を行う

onDragDrop ※NN4のみ
マウスでドラッグ＆ドロップした時に処理を実行