イベントリスナー一覧/JavaScript

本項では、「イベント処理」で説明したイベントリスナーのタイプ一覧を示し、その使い方等も説明します。

イベントリスナー概要

 本項で説明するイベントリスナーのタイプ一覧は以下の通りです。

【イベントリスナーのタイプ一覧】
タイプ 区分 イベント発生
submit フォーム フォーム送信
reset フォーム フォームリセット
select フォーム テキストの選択
input フォーム 値を入力
load 操作 ページ読み込み完了
scroll 操作 スクロール
click マウス マウスをクリック
dblclick マウス マウスをダブルクリック
mousedown マウス マウスボタンを押す
mouseup マウス マウスボタンを離す
mouseenter マウス マウスが要素に入る
mouseleave マウス マウスが要素を出る
mouseover マウス マウスが要素に入る、子要素から出る
mouseout マウス マウスが要素から出る、子要素に入る
mousemove マウス 要素中でマウスを移動
keypress キーボード キーを押す(日本語、Shift、Alt等未対応)
keydown キーボード キーを押す(日本語、Shift、Alt等対応)
keyup キーボード キーを離す(日本語、Shift、Alt等対応)
focus フォーカス 要素がフォーカスされる
blur フォーカス 要素がフォーカスから外れる
change フォーカス 要素の値が変更になってフォーカスが外れる

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>

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

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

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