イベントリスナー一覧/JavaScript
本項では、「イベント処理」で説明したイベントリスナーのタイプ一覧を示し、その使い方等も説明します。
イベントリスナー概要
本項で説明するイベントリスナーのタイプ一覧は以下の通りです。
submit
submitは、実行ボタン(ボタンのタイプがsubmit)等が押された時、ハンドラを呼び出します。以下は例です。
【submit利用例】
<form id="test-submit">
<button type="submit">実行</button;>
</form>
<script>
function func1(event) {
event.preventDefault();
alert("テストです");
}
var x1 = document.getElementById("test-submit");
x1.addEventListener("submit", func1);
</script>
赤字部分でid:test-submitのsubmitをイベントとして登録し、関数func1を呼び出すようにしています。func1に青字のevent.preventDefault();があるのは、ページをリロードしないためです。
実行例は、以下の通りです。
ボタンをクリックすると、アラートが表示されます。テキスト入力欄でエンターキーを押した時もイベント発生になります。
詳細は、「submit」をご参照下さい。
reset
resetは、リセットボタン(ボタンのタイプがreset)が押された時、ハンドラを呼び出します。以下は例です。
【reset利用例】
<form id="test-reset">
<button type="reset">リセット</button;>
</form>
<script>
var x2 = document.getElementById("test-reset");
x2.addEventListener("reset", function(){alert("テストです");});
</script>
イベントリスナーでは宣言した関数を呼び出すのではなく、赤字部分のように無名関数を使う事も出来ます。
実行例は、以下の通りです。
ボタンをクリックすると、アラートが表示されます。
リセットボタンは、テキスト入力欄やラジオボタン、セレクトボタン等をデフォルトに戻す時に使います。
詳細は、「reset」をご参照下さい。
select
selectは、テキスト入力欄(text)やテキストエリア(textarea)で文字が選択された時、ハンドラを呼び出します。以下は例です。
【select利用例】
<form>
<input type="text" value="ここを選択" id="test-select">
</form>
<script>
var x3 = document.getElementById("test-select");
x3.addEventListener("select", function(){alert("テストです");});
</script>
実行例は、以下の通りです。
入力欄でマウスでクリックしたまま左右に移動し、表示された文字を選択中にすると、アラートが表示されます。
詳細は、「select」をご参照下さい。
input
inputは、テキスト(text)やテキストエリア(textarea)で文字が入力された時、ハンドラを呼び出します。以下は例です。
【input利用例】
<form>
<input type="text" id="test-input">
</form>
<script>
var x4 = document.getElementById("test-input");
x4.addEventListener("input", function(){alert("テストです");});
</script>
実行例は、以下の通りです。
テキスト入力欄に文字を入力すると、アラートが表示されます。
詳細は、「input」をご参照下さい。
load
loadは、ページ読み込みが完了した時、ハンドラを呼び出します。以下は例です。
【load利用例】
<script>
window.addEventListener("load", function(){alert("テストです");});
</script>
赤字のwindowは、ページ全体をオブジェクトとしています。このため、ページが表示された時にアラートが表示されます。
詳細は、「load」をご参照下さい。
scroll
scrollは、要素やページ全体をスクロールした時、ハンドラを呼び出します。以下は例です。
【scroll利用例】
<p>スクロール数<span id="test-span">0</span></p>
<div id="test-scroll" style="height:4em;overflow: scroll;">
1行目<br>
2行目<br>
3行目<br>
4行目<br>
5行目
</div>
<script>
function func2() {
var y = document.getElementById("test-span");
y.innerHTML = x5.scrollTop;
}
var x5 = document.getElementById("test-scroll");
x5.addEventListener("scroll", func2);
</script>
赤字部分でid:test-scrollのスクロールをイベントとして登録し、スクロールする度に関数func2を呼び出すようにしています。青字部分のfunc2では、id:test-scrollのスクロール数をscrollTopで取得し、id:test-spanを書き換えています。
実行例は、以下の通りです。
スクロール数0
1行目
2行目
3行目
4行目
5行目
要素内でスクロールする度にスクロール数が表示されます。
window.addEventListenerでscrollをイベントにすると、ページ全体のスクロールがイベント発生になります。
詳細は、「scroll」をご参照下さい。
click
clickは、要素がクリックされた時にハンドラを呼び出します。以下は例です。
【click利用例】
<div id="test-click">
ここをクリックします。
</div>
<script>
var x6 = document.getElementById("test-click");
x6.addEventListener("click", function(){alert("テストです");});
</script>
実行例は、以下の通りです。尚、分かり易いように枠を付けています。
要素内をクリックすると、アラートが表示されます。
詳細は、「click」をご参照下さい。
dblclick
dblclickは、要素がダブルクリックされた時にハンドラを呼び出します。ダブルクリックとは、クリックを2回連続で行う事です。以下は例です。
【dblclick利用例】
<div id="test-dblclick">
ここをダブルクリックします。
</div>
<script>
var x7 = document.getElementById("test-dblclick");
x7.addEventListener("dblclick", function(){alert("テストです");});
</script>
実行例は、以下の通りです。
要素内をダブルクリックすると、アラートが表示されます。
詳細は、「dblclick」をご参照下さい。
mousedown
mousedownは、要素内でマウスボタンが押された時にハンドラを呼び出します。以下は例です。
【mousedown利用例】
<div id="test-mousedown">
ここでマウスボタンを押します。
</div>
<script>
var x8 = document.getElementById("test-mousedown");
x8.addEventListener("mousedown", function(){alert("テストです");});
</script>
実行例は、以下の通りです。
要素内でマウスボタンを押すと、アラートが表示されます。
clickは、マウスボタンを離した時にイベント発生となりますが、mousedownではマウスボタンを押した時がイベント発生になります。
詳細は、「mousedown」をご参照下さい。
mouseup
mouseupは、要素内でマウスボタンを離した時にハンドラを呼び出します。以下は例です。
【mouseup利用例】
<div id="test-mouseup">
ここでマウスボタンを離します。
</div>
<script>
var x9 = document.getElementById("test-mouseup");
x9.addEventListener("mouseup", function(){alert("テストです");});
</script>
実行例は、以下の通りです。
要素内でマウスボタンを離すと、アラートが表示されます。
clickは、要素内でマウスボタンを押す→離すという操作をしてイベント発生となりますが、mouseupではマウスボタンを離しただけでイベント発生になります。
このため、clickは要素外でマウスボタンを押し、要素内でボタンを離してもハンドラは呼び出されませんが、mouseupでは呼び出されます。
詳細は、「mouseup」をご参照下さい。
mouseenter
mouseenterは、要素内にカーソルが移動した時にハンドラを呼び出します。以下は例です。
【mouseenter利用例】
<div id="test-enter">
ここにマウスを移動させます。
</div>
<script>
var x10 = document.getElementById("test-enter");
x10.addEventListener("mouseenter", function(){x10.style.color = 'red';});
</script>
赤字部分は、id:test-enterのスタイルプロパティを使って色を赤に変えています。
実行例は、以下の通りです。
要素内にマウスを移動させると、文字が赤に変わります。
尚、5秒程度で戻るように追加で処理を入れています。
詳細は、「mouseenter」をご参照下さい。
mouseleave
mouseleaveは、要素外にカーソルが移動した時にハンドラを呼び出します。以下は例です。
【mouseleave利用例】
<div id="test-leave">
ここの範囲外にマウスを移動させます。
</div>
<script>
var x11 = document.getElementById("test-leave");
x11.addEventListener("mouseleave", function(){x11.style.color = 'red';});
</script>
赤字部分は、id:test-leaveのスタイルプロパティを使って色を赤に変えています。
実行例は、以下の通りです。
要素内から要素の外にマウスを移動させると、文字が赤に変わります。
尚、5秒程度で戻るように追加で処理を入れています。
詳細は、「mouseleave」をご参照下さい。
mouseover
mouseoverは、要素内にカーソルが移動した時にハンドラを呼び出します。以下は例です。
【mouseover利用例】
<div id="test-over">
ここにマウスを移動させます。
</div>
<script>
var x12 = document.getElementById("test-over");
x12.addEventListener("mouseover", function(){x12.style.color = "red";});
</script>
赤字部分は、id:test-overのスタイルプロパティを使って色を赤に変えています。
実行例は、以下の通りです。
子要素があった場合、子要素の中から外に移動してもイベントになります。
mouseenterも要素内に移動するとイベントになりますが、子要素から移動してもイベントにはなりません。
詳細は、「mouseover」をご参照下さい。
mouseout
mouseoutは、要素外にカーソルが移動した時にハンドラを呼び出します。以下は例です。
【mouseout利用例】
<div id="test-out">
ここの範囲外にマウスを移動させます。
</div>
<script>
var x13 = document.getElementById("test-out");
x13.addEventListener("mouseout", function(){x13.style.color = 'red';});
</script>
実行例は、以下の通りです。
子要素があった場合、子要素に移動してもイベントになります。
mouseleaveも要素外に移動するとイベントになりますが、子要素に移動しても親要素内と見なし、イベントにはなりません。
詳細は、「mouseout」をご参照下さい。
mousemove
mousemoveは、要素内でマウスを移動した時にハンドラを呼び出します。以下は例です。
【mousemove利用例】
<p id="test-p">★</p>
<div id="test-move">
ここでマウスを動かすと★の数が変わります。
</div>
<script>
function func3() {
var y = document.getElementById('test-p');
if(y.innerHTML == "★★★★★★★★★★") {
y.innerHTML = "★";
}
y.innerHTML = y.innerHTML + "★";
}
var x14 = document.getElementById("test-move");
x14.addEventListener("mousemove", func3);
</script>
上記は、赤字部分でtest-pをオブジェクトとしてxから参照しています。青字部分は、test-pに★を追加しています。このため、マウスが移動すると★が追加されていきます。緑部分は、増えすぎないように★が10個になると1個に減らしています。
実行例は、以下の通りです。
★
要素内でマウスを移動する度に★が増え、10個になると1個に戻ります。
詳細は、「mousemove」をご参照下さい。
keypress
keypressは、要素内でキーを押した時にハンドラを呼び出します。以下は例です。
【keypress利用例】
<form>
<input type="text" id="test-keypress">
</form>
<script>
var x15 = document.getElementById("test-keypress");
x15.addEventListener("keypress", function(){alert('テストです');});
</script>
実行例は、以下の通りです。
テキスト入力欄でキーを押すと、アラートが表示されます。
尚、日本語入力、Shift、Alt、Ctrlキー等ではイベントが発生しません。
詳細は、「keypress」をご参照下さい。
keydown
keydownは、要素内でキーを押した時にハンドラを呼び出します。以下は例です。
【keydown利用例】
<form>
<input type="text" id="test-keydown">
</form>
<script>
var x16 = document.getElementById("test-keydown");
x16.addEventListener("keydown", function(){alert("テストです");});
</script>
実行例は、以下の通りです。
テキスト入力欄でキーを押すと、アラートが表示されます。
尚、日本語入力、Shift、Alt、Ctrlキー等でもイベントになります。
詳細は、「keydown」をご参照下さい。
keyup
keyupは、要素内でキーを離した時にハンドラを呼び出します。以下は例です。
【keyup利用例】
<form>
<input type="text" id="test-keyup">
</form>
<script>
var x17 = document.getElementById("test-keyup");
x17.addEventListener("keyup", function(){alert("テストです");});
</script>
実行例は、以下の通りです。
テキスト入力欄でキーを離すと、アラートが表示されます。
onkeyupもonkeydownと同じで日本語入力、Shift、Ctrlキー等でもイベントが発生します。
詳細は、「keyup」をご参照下さい。
focus
focusは、要素内がフォーカスされた時にハンドラを呼び出します。フォーカスとは、マウスでテキストが選択された時等の事を言います。以下は例です。
【focus利用例】
<form>
<input type="text" id="test-focus">
</form>
<script>
function func4() {
alert("テストです");
document.activeElement.blur();
}
var x18 = document.getElementById("test-focus");
x18.addEventListener("focus", func4);
</script>
赤字部分は、フォーカスを外すスクリプトです。ブラウザによっては、一度フォーカスされるとその間中アラートが表示され続けるので、それを防ぐためです。
実行例は、以下の通りです。
テキスト入力欄をクリックすると、アラートが表示されます。
blur
blurは、要素内がフォーカスから外れた時にハンドラを呼び出します。以下は例です。
【blur利用例】
<form>
<input type="text" id="test-blur">
</form>
<script>
var x19 = document.getElementById("test-blur");
x19.addEventListener("blur", function(){alert("テストです");});
</script>
実行例は、以下の通りです。
テキスト入力をクリックした後、別の部分をクリックすると、アラートが表示されます。
change
changeは、要素の値が変更された後、フォーカスから外れた時にハンドラを呼び出します。以下は例です。
【change利用例】
<form>
<input type="text" id="test-change">
</form>
<script>
var x20 = document.getElementById("test-change");
x20.addEventListener("change", function(){alert("テストです");});
</script>
実行例は、以下の通りです。
テキスト入力欄で値を入力し、別の部分をクリックすると、アラートが表示されます。