イベントハンドラ一覧

目次

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

使い方の前に

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

object.onclick = func1;

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

<div onclick="func1()";>

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

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

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は、リセットボタンが押された時、ハンドラーを呼び出します。以下は、例です。

<form id="test-reset">
<button type="reset">リセット</button;>
</form>

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

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

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

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

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

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

onselect

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

<input type="text" value="ここを選択" id="test-select">

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

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

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

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

oninput

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

<input type="text" id="test-input">

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

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

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

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

onload

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

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

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

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

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を書き換えています。

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

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

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

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

onclick

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

<div id="test-click">
ここをクリックします。
</div>

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

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

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

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

ondblclick

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

<div id="test-dblclick">
ここをダブルクリックします。
</div>

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

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

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

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

onmousedown

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

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

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

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

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

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

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

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は、要素内にカーソルが移動した時にハンドラーを呼び出します。以下は、例です。

<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は、要素外にカーソルが移動した時にハンドラーを呼び出します。以下は、例です。

<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は、要素内にカーソルが移動した時にハンドラーを呼び出します。以下は、例です。

<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は、要素外にカーソルが移動した時にハンドラーを呼び出します。以下は、例です。

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

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

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

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

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

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

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は、要素内でキーを押した時にハンドラーを呼び出します。以下は、例です。

<input type="text" id="test-keypress">

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

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

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

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

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

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は、要素内でキーを離した時にハンドラーを呼び出します。以下は、例です。

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

<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は、要素がフォーカスから外れた時にハンドラーを呼び出します。以下は、例です。

<input type="text" id="test-blur">

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

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

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

onchange

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

<input type="text" id="test-change">

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

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

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