イベントハンドラ一覧/JavaScript
本項では、「イベント処理」で説明したイベントハンドラを一覧で示し、その使い方等を説明します。
目次
本項で説明するイベントハンドラの一覧は以下の通りです。
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>
実行例は、以下の通りです。
テキスト入力欄で値を入力し、別の部分をクリックすると、アラートが表示されます。
