イベントハンドラ一覧
本ページでは、「イベント処理」で説明したイベントハンドラを一覧で示し、その使い方も説明します。
目次
以下で、表のヘッダをクリックすることでソート可能です。また、表の右上の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は、実行ボタンなどが押された時、ハンドラーを呼び出します。以下は、例です。
<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を書き換えています。
実行例は、以下の通りです。
スクロール数0
2行目
3行目
4行目
5行目
要素内でスクロールするたびに、スクロール数が表示されます。
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>
実行例は、以下の通りです。
テキスト入力欄で値を入力し、別の部分をクリックすると、アラートが表示されます。