イベントハンドラ

[up] [prev] [next]

一覧

addEventListener(), onabort, onblur, onchange, onclick, ondblclick, onerror, onfocus, oninput, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onmove, onload, onreset, onresize, onscroll, onselect, onsubmit, onunload

イベントハンドラ

イベントハンドラはタグの属性部分に指定します。例えば、ボタンをクリックした時に 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 属性に関数を指定します。

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>

各種イベントハンドラ

◆ 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").onabort = function() {
  alert("Load aborted!");
};
◆ onselect=scripts

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

HTML
<script>
window.onselect = function() {
  alert("Selected");
};
</script>
<textarea>Select this text.</textarea>

[up] [prev] [next]
Copyright (C) 1996-2017 杜甫々
改訂版初版:2001年5月20日、最終更新:2017年12月10日
http://www.tohoho-web.com/js/onevent.htm