イベントハンドラ

目次

イベントハンドラ

イベントハンドラはタグの属性部分に指定します。例えば、ボタンをクリックした時に JavaScript を実行する場合は以下のようにします。ブラウザの種類やバージョンによって、各タグで使用可能なイベントハンドラは異なります。

HTML
<input type="button" value="OK" onclick="alert('OK!!')">
表示

JavaScript の文法に従い、セミコロン(;)で区切ることにより、複数の文を呼び出すことも可能です。

HTML
<input type="button" value="OK" onclick="alert('A'); alert('B')">
表示

イベントハンドラから関数を呼び出すこともできます。関数は通常、<head>～</head> の間で定義します。

HTML
<!DOCTYPE html>
<html>
<head>
<title>TEST</title>
<script>
function kansuu() {
  alert("OK!!");
}
</script>
</head>
<body>
<input type="button" value="OK" onclick="kansuu()">
</body>
</html>

<a href="..."> や <input type="submit"> で onclick などのイベントを使用する際、イベントハンドラの戻り値として false を返すことにより、本来の動作(フォームのサブミットやリンク先への移動)を無効化することができます。

HTML
<script>
function kakunin() {
  if (window.confirm("よろしいですか？")) {
    return true;        // サブミットする、リンクする
  } else {
    return false;       // サブミットしない、リンクジャンプしない
  }
}
</script>

<a href="xxx.htm" onclick="return kakunin()">XXX</a>

<form action="xxx.cgi">
  <input type="submit" value="OK" onclick="return kakunin('OK');">
</form>

イベントハンドラの指定方法

イベントハンドラを指定するには下記の方法があります。

<tagName onxxx="...">

タグに onxxx="..." 属性を指定します。

HTML
<input type="button" value="OK" onclick="alert('Hello!')">

object.onxxx = function

JavaScript でオブジェクトの onxxx 属性に関数を指定します。ひとつのオブジェクトに対してひとつのハンドラのみを設定することができます。他で設定されたハンドラを上書きしないようにするために、onxxx よりも後述の addEventListener() を使用することが多いようです。

HTML
<script>
window.onload = function() {
  alert("Hello!");
};

document.getElementById("button1").onclick = function() {
  alert("Clicked!");
};
</script>
<input type="button" id="button1">

object.addEventListener(event, function)

object に対してイベントを設定します。object.onxxxx = "～" ではひとつのイベントハンドラしか設定することができませんが、addEventListener() を用いることで、複数のイベントハンドラを設定することができます。

HTML
<script>
window.addEventListener("load", function() {
  alert("Hello A");
});
window.addEventListener("load", function() {
  alert("Hello B");
});
</script>

object.removeEventListener(type, listener[, options])

addEventListener() で登録したイベントハンドラを削除します。

JavaScript
function keyUpHandler() { ... }
obj.addEventListener("keyup", keyUpHandler);
obj.removeEventListener("keyup", keyUpHandler);

各種イベントハンドラ

主なイベントについて紹介します。下記で説明されていないイベントの一覧に関しては「JavaScriptイベント一覧」を参照してください。

onclick=scripts

ondblclick=scripts

クリックされた時(onclick)、ダブルクリックされた時(ondblclick)に発生します。Internet Explorer 4.0 以降や Netscape 6 以降では <b> や <img> など大半のタグに指定することができますが、古いブラウザでは、<a>、<area> や、<input> タグによるボタンにのみ指定できます。

HTML
<input type="button" value="Click me" onclick="alert('Clicked')">
<input type="button" value="Double click me" ondblclick="alert('Double clicked')">
表示

onkeydown=scripts

onkeypress=scripts

onkeyup=scripts

キーが押された時(onkeydown)、キーがしばらく押された時(onkeypress)、押されたキーが離された時(onkeyup)に発生します。

HTML
<input type="text"
  onkeypress="document.getElementById('t1').innerHTML += '[Press]'"
  onkeydown="document.getElementById('t1').innerHTML += '[Down]'"
  onkeyup="document.getElementById('t1').innerHTML += '[Up]'">
<div id="t1">Event: </div>
表示
Event:

onmousedown=scripts

onmouseup=scripts

onmouseover=scripts

onmouseout=scripts

onmousemove=scripts

マウスボタンが押された時(onmousedown)、マウスボタンが離された時(onmouseup)、マウスカーソルがそのオブジェクトの上に乗った時(onmouseover)、マウスカーソルがそのオブジェクトの上から離れた時(onmouseout)、マウスカーソルが移動した時(onmousemove)に発生します。

HTML
<input type="button"
  value="Hover your mouse."
  onmousedown="document.getElementById('t2').innerHTML += '[Down]'"
  onmouseup="document.getElementById('t2').innerHTML += '[Up]'"
  onmouseover="document.getElementById('t2').innerHTML += '[Over]'"
  onmouseout="document.getElementById('t2').innerHTML += '[Out]'"
  onmousemove="document.getElementById('t2').innerHTML += '[Move]'"
>
<div id="t2">Event: </div>
表示
Event:

onload=scripts

onbeforeunload=scripts

onunload=scripts

onload はページが読込まれた時に発生します。ページが読み込まれた時の処理を複数指定するには addEventListener() を用います。

HTML
<script>
window.onload = function() { alert("Hello!"); };
</script>

onbeforeunload はページから離れる前に発生します。下記の様に文字列を返却すると、ページ離脱時に警告ダイアログが表示されるようになります。Internet Explorer や Edge では、返却した文字列がダイアログに表示されます。

HTML
<script>
window.onbeforeunload = function() { return "本当にこのページから離れますか？"; };
</script>

onunload では alert() を出すなどの操作は禁止されているので、便利な使用方法はあまりないかもしれません。

HTML
<script>
window.onunload = function() { ... };
</script>

onfocus=scripts

onblur=scripts

その部品がクリックされるなどして、選択された状態になることを「フォーカスがあたる」といいます。これらのイベントは、フォーカスを得た時(onfocus)、フォーカスを失った時(onblur)に発生します。

HTML
<input type="text" name="text1">
<input type="text" name="text2"
  onfocus="document.getElementById('t3').innerHTML += '[Focus]'"
  onblur="document.getElementById('t3').innerHTML += '[Blur]'">
<input type="text" name="text3">
<div id="t3">Event: </div>
表示
Event:

onsubmit=scripts

onreset=scripts

フォームがサブミットされた時(onsubmit)、フォームがリセットされた時(onreset)に発生します。onsubmit="..."、onreset="..." の戻り値として false を返すことにより、サブミットボタン、リセットボタンの本来の動作を無効化することができます。

HTML
<script>
function doSubmit(form) {
  if (window.confirm("送信してよろしいですか？")) {
    return true;
  } else {
    return false;
  }
}
</script>
<form method="POST" action="sample.cgi" onsubmit="return doSubmit(this)">
  <input type="text" name="word" value="abc...">
  <input type="submit" value="OK">
</form>
表示

onchange=scripts

フォーム部品の内容が変更された時に発生します。テキストボックスの場合は、内容が変更されて別の部品にフォーカスが移動した際に発生します。ononput も参照してください。

HTML
<script>
function doChange() {
  document.getElementById('t4').innerHTML += "[Change]";
}
</script>
<input type="checkbox" name="check1" onchange="doChange()">
<input type="text" name="text1" onchange="doChange()">
<select onchange="doChange()">
  <option>AAA</option>
  <option>BBB</option>
</select>
<div id="t4">Event: </div>
表示
Event:

oninput=scripts

テキストボックスなどに入力された時(oninput)発生します。onchange と異なり、テキストボックスでも文字が入力される度に発生します。

HTML
<script>
function doInput() {
  document.getElementById('t5').innerHTML += "[Input]";
}
</script>
<input type="text" name="text1" oninput="doInput()">
<div id="t5">Event: </div>
表示
Event:

onresize=scripts

ウィンドウがリサイズされた時(onresize)に発生します。

JavaScript
window.onresize = function() { console.log("[Resize]"); };

onscroll=scripts

ウィンドウや、スクロールバー付きの要素がスクロールされた時(onscroll)に発生します。

JavaScript
window.onscroll = function() { console.log("[Scroll]"); };

onmove=scripts

ウィンドウの位置が移動した時(onmove)に発生します。Netscape Navigator 4.0 でサポートされていたもので、現在の主要ブラウザではサポートされていません

JavaScript
window.onmove = function() { console.log("[Move]"); };

onabort=scripts

ページや画像などの読込みが中断された時(onabort)に発生します。

JavaScript
window.onabort = function() { console.log("[Abort]"); };

onerror=scripts

読込みが失敗した時に発生します。<body>、<img> などに指定します。

JavaScript
document.getElementById("img1").onerror = function() {
  alert("Load error!");
};

onselect=scripts

テキストが選択された時に発生します。

HTML
<script>
window.onselect = function() {
  alert("Selected");
};
</script>
<textarea>Select this text.</textarea>
Copyright (C) 1996-2019 杜甫々
改訂版初版：2001年5月20日、最終更新：2019年2月17日
https://www.tohoho-web.com/js/onevent.htm