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

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

イベントハンドラ一覧

データなし

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

《イベントハンドラ一覧》
イベントハンドラ説明
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
フォーカスが移動した時に処理を行う

データなし

イベントハンドラ説明
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>
年齢:
※半角数値以外を入力するとフォーカスが外れた時にアラートが表示されます。

onFocusの使用例
フォーカスを当ててもフォーカスが外れるテキストボックス

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

このページの先頭へ

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

データなし

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

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

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

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

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

<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
テキストが選択された時に処理を行う

データなし

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

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

onSelectの使用例
テキストが選択されたら、アラート表示

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

onSelectStartの使用例
ページ全体の選択を禁止する

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

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

データなし

イベントハンドラ説明
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="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>
一番好きな果物: リンゴ  バナナ  ブドウ

onResetの使用例
リセットボタンがクリックされたら、アラート表示

<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
画像読み込み時に処理を行う

データなし

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

onAbortの使用例

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

onErrorの使用例

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

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

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

データなし

イベントハンドラ説明
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
クリック、ダブルクリックされた時に処理を行う

データなし

イベントハンドラ説明
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
キーの状態に応じて処理を行う

データなし

イベントハンドラ説明
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
マウスを乗せたり離した時、マウスでクリックした時に処理を行う

データなし

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

onMouseUpイベント、onMouseDownの使用例
マウスで押されている時、マウスが離れた時で画像ボタンの画像を入れ替える

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

<form action="#" onsubmit="return false;">
    <p>
        画像ボタンをマウスで押している時(onMouseDown)、
        ボタンからマウスが離れた時(onMouseUp)
        のイベントに応じてボタンの画像を入れ替えます。
    </p>
    <p>
        <input type="image" src="/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="/img/btn/btn_over.gif";
    }
    /* onMouseDownイベント発生時 */
    function m_down(obj) {
        obj.src="/img/btn/btn_on.gif";
    }
    /* onMouseOutイベントが発生時 */
    function m_out(obj) {
        obj.src="/img/btn/btn_off.gif";
    }
</script>

<form action="#" onsubmit="return false;">
    <p>
        画像ボタンにマウスが乗った時(onMouseOver)、
        マウスで押した時(onMouseDown)、
        マウスが離れた時(onMouseOut)
        のイベントに応じてボタンの画像を入れ替えます。
    </p>
    <p>
        <input type="image" src="/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
マウスを動かしている時に処理を行う

データなし

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

onMouseMoveの使用例
画像がカーソルを追いかける

サンプルを見る
<script type="text/javascript">
    var id_name="cur";
    var image="/img/cur/custom.cur";

    var offset_x=15;    /* カーソルの表示位置(マウスからのx位置)*/
    var offset_y=10;    /* カーソルの表示位置(マウスからのy位置)*/
    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;
        }
        MouseMove(mouse_x,mouse_y);
    }
    /* 画像をマウスと一緒に移動 */
    function curMove(x,y){
        if(document.all){ /* IE */
            document.all(id_name).style.posLeft=x + offset_x;
            document.all(id_name).style.posTop=y + offset_y;
        }else if(document.getElementById){ /* Firefox, Netscape */
            document.getElementById(id_name).style.left=x + offset_x;
            document.getElementById(id_name).style.top=y + offset_y;
        }
    }
    /* マウス移動 */
    function MouseMove(){
        curMove(mouse_x,mouse_y);
        setTimeout("MouseMove()");
    }
    /* イベントが発生したらマウス移動 */
    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="/img/cur/custom.cur" alt="" /></div>

このページの先頭へ

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

データなし

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

onDragDropの使用例
ドラッグ&ドロップ禁止

サンプルを見る
<script type="text/javascript">
    function fDragDrop(){
        alert("ドラッグ&ドロップは禁止されています");
    }
    window.ondragdrop=fDragDrop;
</script>
このページの先頭へ
Q. このサイトの情報はお役に立ちましたでしょうか?

     

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

安くてかわいいだけじゃない、使えるレンタルサーバーなら、ロリポップ!

当サイトは、ロリポップ!を使ってます。

決め手は、下記の5ポイントでした♪
・サーバーが安定していること
・サポート体制がしっかりしていること
・PHPが使えること
・共有SSLが使えること
・安いこと

通常のhttp://~の他に、https://~で始まるセキュアなURLが発行されるので、今はやりのFacebookページもそのURLを利用することでセキュアなキャンバスページとして運営できます。

メジャーなブログエンジンの「Movable Type」や「Wordpress」も設置マニュアルがあるので、簡単にインストールできます。

可愛いドメインもいっぱい用意されているけれど、他のサーバーのお引っ越しするかもしれないし(爆)、やっぱり自分のドメインで運用したいですよね。 ムームードメインだと、「.com」は年間950円くらいです。 ロリポップの画面から取得したドメインが簡単に設定できるようになっているのでその辺のことが分からなくても安心です。

また、ほとんどの機能を使える無料お試し期間が10日間あるのでじっくり検討できます。 よしレンタルしようとなった場合は、おさいぽという独自サービスがあるので、オンライン上で全部手続きできるのうれしい限り。

マニュアルだけでなく、ライブチャットが完備されているのですぐに質問できます。 とてもサポート体制が手厚いので、初めてレンタルサーバーを使う人にもとってもおすすめです。

» ロリポプラン 詳細はこちら