イベントハンドラ一覧

本ページでは、「イベント処理」で説明したイベントハンドラを一覧で示し、その使い方も説明します。

目次

以下で、表のヘッダをクリックすることでソート可能です。また、表の右上のSearchボックスで検索も可能です。各タイプをクリックすると、使い方までジャンプします。

【イベントハンドラ一覧】
イベントハンドラ 区分 イベント発生
onsubmit フォーム フォーム送信
onreset フォーム フォームリセット
onselect フォーム テキストの選択
oninput フォーム 値を入力
onload 操作 ページ読み込み完了
onscroll 操作 スクロール
onclick マウス マウスをクリック
ondblclick マウス マウスをダブルクリック
onmousedown マウス マウスボタンを押す
onmouseup マウス マウスボタンを離す
onmouseenter マウス マウスが要素に入る
onmouseleave マウス マウスが要素を出る
onmouseover マウス マウスが要素に入る、子要素から出る
onmouseout マウス マウスが要素から出る、子要素に入る
onmousemove マウス 要素中でマウスを移動
onkeypress キーボード キーを押す(日本語、Shift、Alt等未対応)
onkeydown キーボード キーを押す(日本語、Shift、Alt等対応)
onkeyup キーボード キーを離す(日本語、Shift、Alt等対応)
onfocus フォーカス 要素がフォーカスされる
onblur フォーカス 要素がフォーカスから外れる
onchange フォーカス 要素の値が変更になってフォーカスが外れる

使い方の前に

本ページでは、イベントハンドラのプロパティで使い方を説明しています。プロパティで使う時は、例えばonclickであれば以下のように記述します。

object.onclick = func1;

イベントハンドラは、HTMLの属性としても記述可能です。その場合は、以下のように記述します。

<div onclick="func1()";>

どちらもクリックした時にイベントが発生しますが、HTMLの属性として記述する方法は推奨されていません。理由は、HTMLとJavaScriptは切り離した方が良いためです。

HTMLの属性で記述していた場合、呼び出す関数を変えたい時に、HTMLを変更する必要があります。また、<div onclick="alert("テスト");">などと直接JavaScriptを記述できますが、たくさんの似た処理がある時は読みにくくなったり、書き換えが難しくなったりします。

onsubmit

onsubmitは、実行ボタンなどが押された時、ハンドラーを呼び出します。以下は、例です。

【onsubmit利用例】
<form id="test-submit">
<button type="submit">実行</button;>
</form>

<script>
function func1() {
  event.preventDefault();
  alert("テストです");
}

const x = document.querySelector("#test-submit");
x.onsubmit = func1;
</script>

赤字部分でid:test-submitのsubmitをイベントとして登録し、関数func1を呼び出すようにしています。func1に青字のevent.preventDefault();があるのは、ページをリロードしないためです。

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

ボタンをクリックすると、アラートが表示されます。テキスト入力欄がある場合、エンターキーを押した時もonsubmitによってイベント発生になります。

詳細は、「onsubmit」をご参照ください。

onreset

onresetは、リセットボタンが押された時、ハンドラーを呼び出します。以下は、例です。

【onreset利用例】
<form id="test-reset">
<button type="reset">リセット</button;>
</form>

<script>
const x = document.querySelector("#test-reset");
x.onreset = function(){alert("テストです");};
</script>

イベントハンドラでは、宣言した関数を呼び出すのではなく、赤字部分のように無名関数を使うこともできます。

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

ボタンをクリックすると、アラートが表示されます。

リセットボタンは、テキスト入力欄やラジオボタン、セレクトボタンなどをデフォルトに戻す時に使います。

詳細は、「onreset」をご参照ください。

onselect

onselectは、テキスト入力欄やテキストエリアで文字が選択された時、ハンドラーを呼び出します。以下は、例です。

【onselect利用例】
<input type="text" value="ここを選択" id="test-select">

<script>
const x = document.querySelector("#test-select");
x.onselect = function(){alert("テストです");};
</script>

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

入力欄でマウスでクリックしたまま左右に移動し、表示された文字を選択中にすると、アラートが表示されます。

詳細は、「onselect」をご参照ください。

oninput

oninputは、テキストやテキストエリアで文字が入力された時、ハンドラーを呼び出します。以下は、例です。

【oninput利用例】
<input type="text" id="test-input">

<script>
const x = document.querySelector("#test-input");
x.oninput = function(){alert("テストです");};
</script>

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

テキスト入力欄に文字を入力すると、アラートが表示されます。

詳細は、「oninput」をご参照ください。

onload

onloadは、ページ読み込みが完了した時、ハンドラーを呼び出します。以下は、例です。

【onload利用例】
<script>
window.onload = function(){alert("テストです");};
</script>

赤字のwindowは、ページ全体をオブジェクトとしています。このため、ページが表示された時にアラートが表示されます。

詳細は、「onload」をご参照下さい。

onscroll

onscrollは、要素やページ全体をスクロールした時、ハンドラーを呼び出します。以下は、例です。

【onscroll利用例】
<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 func1() {
  const y = document.querySelector("#test-span");
  y.textContent = x.scrollTop;
}

const x = document.querySelector("#test-scroll");
x.onscroll = func1;
</script>

赤字部分でid:test-scrollのスクロールをイベントとして登録し、スクロールする度に関数func1を呼び出すようにしています。青字部分のfunc1では、id:test-scrollのスクロール数をscrollTopで取得し、id:test-spanを書き換えています。

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

スクロール数0

1行目
2行目
3行目
4行目
5行目

要素内でスクロールするたびに、スクロール数が表示されます。

window.onscrollでイベントにすると、ページ全体のスクロールがイベント発生になります。

詳細は、「onscroll」をご参照ください。

onclick

onclickは、要素がクリックされた時にハンドラーを呼び出します。以下は、例です。

【onclick利用例】
<div id="test-click">
ここをクリックします。
</div>

<script>
const x = document.querySelector("#test-click");
x.onclick = function(){alert("テストです");};
</script>

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

ここをクリックします。

要素内をクリックすると、アラートが表示されます。

詳細は、「onclick」をご参照ください。

ondblclick

ondblclickは、要素がダブルクリックされた時にハンドラーを呼び出します。ダブルクリックとは、クリックを2回連続で行うことです。以下は、例です。

【ondblclick利用例】
<div id="test-dblclick">
ここをダブルクリックします。
</div>

<script>
const x = document.querySelector("#test-dblclick");
x.ondblclick = function(){alert("テストです");};
</script>

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

ここをダブルクリックします。

要素内をダブルクリックすると、アラートが表示されます。

詳細は、「ondblclick」をご参照ください。

onmousedown

onmousedownは、要素内でマウスボタンが押された時にハンドラーを呼び出します。以下は、例です。

【onmousedown利用例】
<div id="test-mousedown">
ここでマウスボタンを押します。
</div>

<script>
const x = document.querySelector("#test-mousedown");
x.onmousedown = function(){alert("テストです");};
</script>

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

ここでマウスボタンを押します。

要素内でマウスボタンを押すと、アラートが表示されます。

onclickは、マウスボタンを離した時にイベント発生となりますが、onmousedownではマウスボタンを押した時がイベント発生になります。

詳細は、「onmousedown」をご参照ください。

onmouseup

onmouseupは、要素内でマウスボタンを離した時にハンドラーを呼び出します。以下は、例です。

【onmouseup利用例】
<div id="test-mouseup">
ここでマウスボタンを離します。
</div>

<script>
const x = document.querySelector("#test-mouseup");
x.onmouseup = function(){alert("テストです");};
</script>

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

ここでマウスボタンを離します。

要素内でマウスボタンを離すと、アラートが表示されます。

onclickは、要素内でマウスボタンを押す→離すという操作をしてイベント発生となりますが、onmouseupではマウスボタンを離しただけでイベント発生になります。

このため、onclickは要素外でマウスボタンを押し、要素内でボタンを離してもハンドラーは呼び出されませんが、onmouseupでは呼び出されます。

詳細は、「onmouseup」をご参照ください。

onmouseenter

onmouseenterは、要素内にカーソルが移動した時にハンドラーを呼び出します。以下は、例です。

【onmouseenter利用例】
<div id="test-enter">
ここにマウスを移動させます。
</div>

<script>
const x = document.querySelector("#test-enter");
x.onmouseenter = function(){x.style.color = "red";};
</script>

赤字部分は、id:test-enterのスタイルプロパティを使って色を赤に変えています。

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

ここにマウスを移動させます。

要素内にマウスを移動させると、文字が赤に変わります。

なお、5秒程度で戻るように追加で処理を入れています。

詳細は、「onmouseenter」をご参照ください。

onmouseleave

onmouseleaveは、要素外にカーソルが移動した時にハンドラーを呼び出します。以下は、例です。

【onmouseleave利用例】
<div id="test-leave">
ここの範囲外にマウスを移動させます。
</div>

<script>
const x = document.querySelector("#test-leave");
x.onmouseleave = function(){x.style.color = "red";};
</script>

赤字部分は、id:test-leaveのスタイルプロパティを使って色を赤に変えています。

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

ここの範囲外にマウスを移動させます。

要素内から要素の外にマウスを移動させると、文字が赤に変わります。

なお、5秒程度で戻るように追加で処理を入れています。

詳細は、「onmouseleave」をご参照ください。

onmouseover

mouseoverは、要素内にカーソルが移動した時にハンドラーを呼び出します。以下は、例です。

【onmouseover利用例】
<div id="test-over">
ここにマウスを移動させます。
</div>

<script>
const x12 = document.querySelector("#test-over");
x12.onmouseover = function(){x12.style.color = "red";};
</script>

赤字部分は、id:test-overのスタイルプロパティを使って色を赤に変えています。

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

ここにマウスを移動させます。

子要素があった場合、子要素の中から外に移動してもイベントになります。

onmouseenterも要素内に移動するとイベントになりますが、子要素から移動してもイベントにはなりません。

詳細は、「onmouseover」をご参照ください。

onmouseout

onmouseoutは、要素外にカーソルが移動した時にハンドラーを呼び出します。以下は、例です。

【onmouseout利用例】
<div id="test-out">
ここの範囲外にマウスを移動させます。
</div>

<script>
const x = document.querySelector("#test-out");
x.onmouseout = function(){x.style.color = "red";};
</script>

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

ここの範囲外にマウスを移動させます。

子要素があった場合、子要素に移動してもイベントになります。

onmouseleaveも要素外に移動するとイベントになりますが、子要素に移動しても親要素内と見なし、イベントにはなりません。

詳細は、「onmouseout」をご参照ください。

onmousemove

onmousemoveは、要素内でマウスを移動した時にハンドラーを呼び出します。以下は、例です。

【onmousemove利用例】
<p id="test-p">★</p>
<div id="test-move">
ここでマウスを動かすと★の数が変わります。
</div>

<script>
function func1() {
  const y = document.querySelector("#test-p");
  if(y.textContent === "★★★★★★★★★★") {
    y.textContent = "★";
  }
  y.insertAdjacentHTML("beforeend", "★");
}
const x = document.querySelector("#test-move");
x.onmousemove = func1;
</script>

上記は、赤字部分でtest-pをオブジェクトとしてxから参照しています。青字部分は、test-pに★を追加しています。このため、マウスが移動すると★が追加されていきます。緑部分は、増えすぎないように★が10個になると1個に減らしています。

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

ここでマウスを動かすと★の数が変わります。

要素内でマウスを移動するたびに★が増え、10個になると1個に戻ります。

詳細は、「onmousemove」をご参照ください。

onkeypress

onkeypressは、要素内でキーを押した時にハンドラーを呼び出します。以下は、例です。

【onkeypress利用例】
<input type="text" id="test-keypress">

<script>
const x = document.querySelector("#test-keypress");
x.onkeypress = function(){alert('テストです');};
</script>

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

テキスト入力欄でキーを押すと、アラートが表示されます。

なお、日本語入力、Shift、Alt、Ctrlキー等ではイベントが発生しません。

詳細は、「onkeypress」をご参照ください。

onkeydown

onkeydownは、要素内でキーを押した時にハンドラーを呼び出します。以下は、例です。

【onkeydown利用例】
<input type="text" id="test-keydown">

<script>
const x = document.querySelector("#test-keydown");
x.onkeydown = function(){alert("テストです");};
</script>

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

テキスト入力欄でキーを押すと、アラートが表示されます。

なお、日本語入力、Shift、Alt、Ctrlキーなどでもイベントになります。

詳細は、「onkeydown」をご参照ください。

onkeyup

onkeyupは、要素内でキーを離した時にハンドラーを呼び出します。以下は、例です。

【onkeyup利用例】
<input type="text" id="test-keyup">

<script>
const x = document.querySelector("#test-keyup");
x.onkeyup =  function(){alert("テストです");};
</script>

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

テキスト入力欄でキーを離すと、アラートが表示されます。

onkeyupもonkeydownと同じで日本語入力、Shift、Ctrlキーなどでもイベントが発生します。

詳細は、「onkeyup」をご参照ください。

onfocus

onfocusは、要素がフォーカスされた時にハンドラーを呼び出します。フォーカスとは、マウスでテキスト入力欄が選択された時などのことを言います。以下は、例です。

【onfocus利用例】
<input type="text" id="test-focus">

<script>
function func1() {
  alert("テストです");
  document.activeElement.blur();
}

const x = document.querySelector("#test-focus");
x.onfocus = func1;
</script>

赤字部分は、フォーカスを外すスクリプトです。ブラウザによっては、一度フォーカスされるとその間中アラートが表示され続けるので、それを防ぐためです。

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

テキスト入力欄をクリックすると、アラートが表示されます。

onblur

onblurは、要素がフォーカスから外れた時にハンドラーを呼び出します。以下は、例です。

【onblur利用例】
<input type="text" id="test-blur">

<script>
const x = document.querySelector("#test-blur");
x.onblur = function(){alert("テストです");};
</script>

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

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

onchange

onchangeは、要素の値が変更された後、フォーカスから外れた時にハンドラーを呼び出します。以下は、例です。

【onchange利用例】
<input type="text" id="test-change">

<script>
const x = document.querySelector("#test-change");
x.onchange = function(){alert("テストです");};
</script>

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

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

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