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

本項では、「イベント処理」で説明したイベントハンドラを一覧で示し、その使い方等を説明します。

目次

 本項で説明するイベントハンドラの一覧は以下の通りです。

【イベントハンドラ一覧】
イベントハンドラ 区分 イベント発生
onsubmit フォーム フォーム送信
onreset フォーム フォームリセット
onselect フォーム テキストの選択
oninput フォーム 値を入力
onload 操作 ページ読み込み完了
onscroll 操作 スクロール
onclick マウス マウスをクリック
ondblclick マウス マウスをダブルクリック
onmousedown マウス マウスボタンを押す
onmouseup マウス マウスボタンを離す
onmouseenter マウス マウスが要素に入る
onmouseleave マウス マウスが要素を出る
onmouseover マウス マウスが要素に入る、子要素から出る
onmouseout マウス マウスが要素から出る、子要素に入る
onmousemove マウス 要素中でマウスを移動
onkeypress キーボード キーを押す(日本語、Shift、Alt等未対応)
onkeydown キーボード キーを押す(日本語、Shift、Alt等対応)
onkeyup キーボード キーを離す(日本語、Shift、Alt等対応)
onfocus フォーカス 要素がフォーカスされる
onblur フォーカス 要素がフォーカスから外れる
onchange フォーカス 要素の値が変更になってフォーカスが外れる

onsubmit

 onsubmitは、実行ボタン(ボタンのタイプがsubmit)等が押された時、ハンドラを呼び出します。以下は例です。

【onsubmit利用例】
<form onsubmit="alert('テストです');return false;">
<button type="submit">実行</button;>
</form>

 実行例は、以下の通りです。

 ボタンをクリックすると、アラートが表示されます。return falseがあるのは、ページをリロードしないためです。

 テキスト入力欄(インプットのタイプがtext)でエンターキーを押した時もイベント発生になります。

 詳細は、「onsubmit」をご参照下さい。

onreset

 onresetは、リセットボタン(ボタンのタイプがreset)が押された時、ハンドラを呼び出します。以下は例です。

【onreset利用例】
<form onreset="alert('テストです');">
<button type="reset">リセット</button;>
</form>

 実行例は、以下の通りです。

 ボタンをクリックすると、アラートが表示されます。

 リセットボタンは、テキスト入力欄やラジオボタン、セレクトボタン等をデフォルトに戻す時に使います。

 onresetについては、「onreset」もご参照下さい。

onselect

 onselectは、テキスト入力欄(text)やテキストエリア(textarea)で文字が選択された時、ハンドラを呼び出します。以下は例です。

【onselect利用例】
<form>
<input type="text" value="ここを選択" onselect="alert('テストです');">
</form>

 実行例は、以下の通りです。

 入力欄でマウスでクリックしたまま左右に移動し、表示された文字を選択中にすると、アラートが表示されます。

 詳細は、「onselect」をご参照下さい。

oninput

 oninputは、テキスト(text)やテキストエリア(textarea)で文字が入力された時、ハンドラを呼び出します。以下は例です。

【oninput利用例】
<form>
<input type="text" oninput="alert('テストです');">
</form>

 実行例は、以下の通りです。

 テキスト入力欄に文字を入力すると、アラートが表示されます。

 尚、Internet Explorer8以前では動作しません。

 詳細は、「oninput」をご参照下さい。

onload

 onloadは、ページ読み込みが完了した時、ハンドラを呼び出します。以下は例です。

【onload利用例】
<body onload="alert('テストです');">

 <body>タグを上記のように書き換えます。これにより、ページが表示された時にアラートが表示されます。

 詳細は、「onload」をご参照下さい。

onscroll

 onscrollは、要素やページ全体をスクロールした時、ハンドラを呼び出します。以下は例です。

【onscroll利用例】
<script>
function func1() {
    var x = document.getElementById("test-span");
    var y = document.getElementById("test-div");
    x.innerHTML = y.scrollTop;
}
</script>

<p>スクロール数<span id="test-span">0</span></p>
<div onscroll="func1();" id="test-div" style="height:4em;overflow: scroll;">
1行目<br>
2行目<br>
3行目<br>
4行目<br>
5行目
</div>

 赤字部分は、緑字のid:test-spanとid:test-divをオブジェクトとしてx、yから参照しています。青字部分は、id:test-divのスクロール数をscrollTopで取得し、id:test-spanを書き換えています。これらはonscrollによって、スクロールが発生する度に呼び出されます。

 実行例は、以下の通りです。

 スクロール数0

1行目
2行目
3行目
4行目
5行目

 要素内でスクロールする度にスクロール数が表示されます。

 <body>にonscrollを記述すると、ページ全体のスクロールがイベント発生になります。

 詳細は、「onscroll」をご参照下さい。

onclick

 onclickは、要素がクリックされた時にハンドラを呼び出します。以下は例です。

【onclick利用例】
<div onclick="alert('テストです');">
ここをクリックします。
</div>

 実行例は、以下の通りです。尚、分かり易いように枠を付けています。

ここをクリックします。

 要素内をクリックすると、アラートが表示されます。

 詳細は、「onclick」をご参照下さい。

ondblclick

 ondblclickは、要素がダブルクリックされた時にハンドラを呼び出します。ダブルクリックとは、クリックを2回連続で行う事です。以下は例です。

【ondblclick利用例】
<div ondblclick="alert('テストです');">
ここをダブルクリックします。
</div>

 実行例は、以下の通りです。

ここをダブルクリックします。

 要素内をダブルクリックすると、アラートが表示されます。

 詳細は、「ondblclick」をご参照下さい。

onmousedown

 onmousedownは、要素内でマウスボタンが押された時にハンドラを呼び出します。以下は例です。

【onmousedown利用例】
<div onmousedown="alert('テストです');">
ここでマウスボタンを押します。
</div>

 実行例は、以下の通りです。

ここでマウスボタンを押します。

 要素内でマウスボタンを押すと、アラートが表示されます。

 onclickは、マウスボタンを離した時にイベント発生となりますが、onmousedownではマウスボタンを押した時がイベント発生になります。

 詳細は、「onmousedown」をご参照下さい。

onmouseup

 onmouseupは、要素内でマウスボタンを離した時にハンドラを呼び出します。以下は例です。

【onmouseup利用例】
<div onmouseup="alert('テストです');">
ここでマウスボタンを離します。
</div>

 実行例は、以下の通りです。

ここでマウスボタンを離します。

 要素内でマウスボタンを離すと、アラートが表示されます。

 onclickは、要素内でマウスボタンを押す→離すという操作をしてイベント発生となりますが、onmouseupではマウスボタンを離しただけでイベント発生になります。

 このため、onclickは要素外でマウスボタンを押し、要素内でボタンを離してもハンドラは呼び出されませんが、onmouseupでは呼び出されます。

 詳細は、「onmouseup」をご参照下さい。

onmouseenter

 onmouseenterは、要素内にカーソルが移動した時にハンドラを呼び出します。以下は例です。

【onmouseenter利用例】
<script>
function func2() {
    var x = document.getElementById("test-enter");
    x.style.color = "red";
}
</script>

<div onmouseenter="func2();" id="test-enter">
ここにマウスを移動させます。
</div>

 赤字部分は、id:test-enterのスタイルプロパティを使って色を赤に変えています。関数func2は、onmouseenterにより要素内にマウスが移動する度に呼び出されます。

 実行例は、以下の通りです。

ここにマウスを移動させます。

 要素内にマウスを移動させると、文字が赤に変わります。

 尚、5秒程度で戻るように追加で処理を入れています。

 onmouseenterの詳細は、「onmouseenter」をご参照下さい。

onmouseleave

 onmouseleaveは、要素外にカーソルが移動した時にハンドラを呼び出します。以下は例です。

【onmouseleave利用例】
<script>
function func3() {
    var x = document.getElementById("test-leave");
    x.style.color = "red";
}
</script>

<div onmouseleave="func3();" id="test-leave">
ここの範囲外にマウスを移動させます。
</div>

 赤字部分は、id:test-leaveのスタイルプロパティを使って色を赤に変えています。関数test3は、onmouseleaveにより要素の外にマウスが移動する度に呼び出されます。

 実行例は、以下の通りです。

ここの範囲外にマウスを移動させます。

 要素内から要素の外にマウスを移動させると、文字が赤に変わります。

 尚、5秒程度で戻るように追加で処理を入れています。

 onmouseleaveの詳細は、「onmouseleave」をご参照下さい。

onmouseover

 onmouseoverは、要素内にカーソルが移動した時にハンドラを呼び出します。以下は例です。

【onmouseover利用例】
<script>
function func4() {
    var x = document.getElementById("test-over");
    x.style.color = "red";
}
</script>

<div onmouseover="func4();" id="test-over">
ここにマウスを移動させます。
</div>

 赤字部分は、id:test-overのスタイルプロパティを使って色を赤に変えています。関数test4は、onmouseoverにより要素内にマウスが移動する度に呼び出されます。

 実行例は、以下の通りです。

ここにマウスを移動させます。

 子要素があった場合、子要素の中から外に移動してもイベントになります。

 onmouseenterも要素内に移動するとイベントになりますが、子要素から移動してもイベントにはなりません。

 onmouseoverの詳細は、「onmouseover」をご参照下さい。

onmouseout

 onmouseoutは、要素外にカーソルが移動した時にハンドラを呼び出します。以下は例です。

【onmouseout利用例】
<script>
function func5() {
    var x = document.getElementById("test-out");
    x.style.color = "red";
}
</script>

<div onmouseout="func5();" id="test-out">
ここの範囲外にマウスを移動させます。
</div>

 赤字部分は、id:test-outのスタイルプロパティを使って色を赤に変えています。関数test5は、onmouseoutにより要素外にマウスが移動する度に呼び出されます。

 実行例は、以下の通りです。

ここの範囲外にマウスを移動させます。

 子要素があった場合、子要素に移動してもイベントになります。

 onmouseleaveも要素外に移動するとイベントになりますが、子要素に移動しても親要素内と見なし、イベントにはなりません。

 onmouseoutの詳細は、「onmouseout」をご参照下さい。

onmousemove

 onmousemoveは、要素内でマウスを移動した時にハンドラを呼び出します。以下は例です。

【onmousemove利用例】
<script>
function func6() {
    var x = document.getElementById("test-p");
    if(x.innerHTML == "★★★★★★★★★★") {
        x.innerHTML = "★";
    }
    x.innerHTML = x.innerHTML + "★";
}
</script>

<p id="test-p">★</p>
<div onmousemove="func6();" id="test-div2">
ここでマウスを動かすと★の数が変わります。
</div>

 上記は、赤字部分でtest-pをオブジェクトとしてxから参照しています。青字部分は、test-pに★を追加しています。このため、マウスが移動すると★が追加されていきます。緑部分は、増えすぎないように★が10個になると1個に減らしています。

 実行例は、以下の通りです。

ここでマウスを動かすと★の数が変わります。

 要素内でマウスを移動する度に★が増え、10個になると1個に戻ります。

 onmousemoveの詳細は、「onmousemove」をご参照下さい。

onkeypress

 onkeypressは、要素内でキーを押した時にハンドラを呼び出します。以下は例です。

【onkeypress利用例】
<form>
<input type="text" onkeypress="alert('テストです');">
</form>

 実行例は、以下の通りです。

 テキスト入力欄でキーを押すと、アラートが表示されます。

 尚、日本語入力、Shift、Alt、Ctrlキー等ではイベントが発生しません。

 詳細は、「onkeypress」をご参照下さい。

onkeydown

 onkeydownは、要素内でキーを押した時にハンドラを呼び出します。以下は例です。

【onkeydown利用例】
<form>
<input type="text" onkeydown="alert('テストです');">
</form>

 実行例は、以下の通りです。

 テキスト入力欄でキーを押すと、アラートが表示されます。

 尚、日本語入力、Shift、Alt、Ctrlキー等でもイベントになります。

 詳細は、「onkeydown」をご参照下さい。

onkeyup

 onkeyupは、要素内でキーを離した時にハンドラを呼び出します。以下は例です。

【onkeyup利用例】
<form>
<input type="text" onkeyup="alert('テストです');">
</form>

 実行例は、以下の通りです。

 テキスト入力欄でキーを離すと、アラートが表示されます。

 onkeyupもonkeydownと同じで日本語入力、Shift、Ctrlキー等でもイベントが発生します。

 詳細は、「onkeyup」をご参照下さい。

onfocus

 onfocusは、要素内がフォーカスされた時にハンドラを呼び出します。フォーカスとは、マウスでテキストが選択された時等の事を言います。以下は例です。

【onfocus利用例】
<form>
<input type="text" onfocus="alert('テストです');blur();">
</form>

 赤字部分は、フォーカスを外すスクリプトです。ブラウザによっては、一度フォーカスされるとその間中アラートが表示され続けるので、それを防ぐためです。

 実行例は、以下の通りです。

 テキスト入力欄をクリックすると、アラートが表示されます。

onblur

 onblurは、要素内がフォーカスから外れた時にハンドラを呼び出します。以下は例です。

【onblur利用例】
<form>
<input type="text" onblur="alert('テストです');">
</form>

 実行例は、以下の通りです。

 テキスト入力をクリックした後、別の部分をクリックすると、アラートが表示されます。

onchange

 onchangeは、要素の値が変更された後、フォーカスから外れた時にハンドラを呼び出します。以下は例です。

【onchange利用例】
<form>
<input type="text" onchange="alert('テストです');">
</form>

 実行例は、以下の通りです。

 テキスト入力欄で値を入力し、別の部分をクリックすると、アラートが表示されます。

  • このエントリーをはてなブックマークに追加