Search
  1. イベントハンドラ一覧
  2. onBlur/onFocus〔フォーカスが移動した時に処理を行う〕
  3. onChange〔フォームの入力値、選択が変更されたときに処理を行う〕
  4. onSelect/onSelectStart〔テキストが選択された時に処理を行う〕
  5. onSubmit/onReset〔フォームの送信時、リセット時に処理を行う〕
  6. onAbort/onError〔画像読み込み時に処理を行う〕
  7. onLoad/onUnload〔ページ読み込み時、ページの切り替え時に処理を行う〕
  8. onClick/onDblClick〔クリック、ダブルクリックされた時に処理を行う〕
  9. onKeyPress/onKeyDown/onKeyUp〔キーの状態に応じて処理を行う〕
  10. onMouseOut/onMouseOver/onMouseDown/onMouseUp〔マウスを乗せたり離した時、マウスでクリックした時に処理を行う〕
  11. onMousemove〔マウスを動かしている時に処理を行う〕
  12. 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>

画像ボタンをマウスで押している時(onMouseDown)、 ボタンからマウスが離れた時(onMouseUp) のイベントに応じてボタンの画像を入れ替えます。

 ←Click!!

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>

画像ボタンにマウスが乗った時(onMouseOver)、 マウスで押した時(onMouseDown)、 マウスが離れた時(onMouseOut) のイベントに応じてボタンの画像を入れ替えます。

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>
Q. このサイトの情報はお役に立ちましたでしょうか?

投票する 投票結果を見る

管理人に【web拍手】を送るweb拍手(1行メッセージも送れます♪)

pagetop