JavaScriptでブラウザ上で使えるイベントについて、初心者でも理解しやすい解説とサンプルコードを紹介します。
ブラウザ上で利用できるJavaScriptのイベントってどんなものがありますか？
マウスのクリックイベントや、キーボードの入力のイベント、フォーム操作時のイベントなどがあります。
ブラウザ上で利用できるイベントまとめ
イベントは、ユーザーアクションやページの状態変化に応じて発生します。ブラウザ上で利用できる主なイベントについて、以下のようなものがあります。
| 分類 | イベント名 | 発生タイミング |
|---|---|---|
| マウス | click | マウスボタンがクリックされた時 |
| マウス | mouseover | マウスカーソルが要素に乗った時 |
| マウス | mouseout | マウスカーソルが要素から外れた時 |
| マウス | mousedown | マウスボタンが押された時 |
| マウス | mouseup | マウスボタンが離された時 |
| マウス | mousemove | マウスカーソルが要素上で移動した時 |
| マウス | mouseenter | マウスカーソルが要素内に入った時 |
| マウス | mouseleave | マウスカーソルが要素内から出た時 |
| キー | keydown | キーボードのキーが押された時 |
| キー | keyup | キーボードのキーが離された時 |
| キー | keypress | キーボードのキーが押されている間に文字が入力された時 |
| フォーム | submit | フォームが送信された時 |
| フォーム | reset | フォームがリセットされた時 |
| フォーム | change | フォームの値が変更された時 |
| フォーム | focus | フォーム要素にフォーカスが当てられた時 |
| フォーム | blur | フォーム要素からフォーカスが外れた時 |
| フォーム | focusin | フォーム要素にフォーカスが当てられた時（バブリングあり） |
| フォーム | focusout | フォーム要素からフォーカスが外れた時（バブリングあり） |
| その他 | load | ページや画像などが読み込まれた時 |
| その他 | unload | ページがアンロードされた時 |
| その他 | resize | ウィンドウのサイズが変更された時 |
| その他 | scroll | スクロールされた時 |
クリックイベントの解説とサンプル
クリックイベントとは、ユーザーが要素をクリックしたときに発生するイベントです。addEventListener()メソッドを使用してクリックイベントを設定することができます。
document.getElementById("btn").addEventListener("click", function(){
alert("ボタンがクリックされました！");
});マウスオーバーイベントの解説とサンプル
マウスオーバーイベントとは、要素にマウスカーソルが重なった際に発生するイベントです。addEventListener()メソッドを使用してマウスオーバーイベントを設定することができます。
document.getElementById("btn").addEventListener("mouseover", function(){
document.getElementById("btn").style.backgroundColor = "yellow";
});上記のコードでは、idが”btn”の要素にマウスカーソルが重なった際に、要素の背景色が黄色に変更されます。
キーボードイベントの解説とサンプル
キーボードイベントとは、キーボードのキーが押された際に発生するイベントです。addEventListener()メソッドを使用してキーボードイベントを設定することができます。
document.addEventListener("keydown", function(event){
console.log("キーが押されました！キーコード：" + event.keyCode);
});上記のコードでは、キーが押された際に、コンソールに”キーが押されました！キーコード：[押されたキーのコード]”と表示されます。
mouseenterイベントとmouseleaveイベントの解説
mouseenter イベントと mouseleave イベントについて解説します
マウスカーソルが要素内に入った時に発生するmouseenterイベント
mouseenter イベントは、マウスカーソルが要素内に入った時に発生します。ただし、要素内の子要素に入った時には発生しません。また、mouseover イベントと異なり、要素内を移動しても発生しません。
mouseenter イベントは、マウスカーソルが要素内に入った時に発生します。ただし、要素内の子要素に入った時には発生しません。また、mouseover イベントと異なり、要素内を移動しても発生しません。
マウスカーソルが要素から出た時に発生するmouseleaveイベント
mouseleave イベントは、マウスカーソルが要素から出た時に発生します。要素内の子要素から出た時にも発生します。また、mouseout イベントと異なり、要素内を移動しても発生しません。
mouseleave イベントは、要素から出たことを検知する場合に使われます。例えば、メニューなどでサブメニューが表示されるような場合に、メインメニューに mouseleave イベントを設定して、マウスがメインメニューから出た時にサブメニューを非表示にするといった使い方があります。
mouseenterイベントとmouseleaveイベントのサンプル
サンプルコードを用いて、mouseenter イベントと mouseleave イベントの動作を確認してみましょう。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>マウスイベント</title>
</head>
<body>
<div id="target" style="width: 200px; height: 200px; background-color: #f00;"></div>
<script>
const target = document.getElementById('target');
target.addEventListener('mouseenter', function() {
target.style.backgroundColor = '#0f0';
});
target.addEventListener('mouseleave', function() {
target.style.backgroundColor = '#f00';
});
</script>
</body>
</html> 上記のコードでは、target という ID を持つ div 要素に mouseenter イベントと mouseleave イベントを設定しています。マウスカーソルが div 要素に入った時は背景色が緑に、div 要素から出た時は背景色が赤に変わるようになっています。
mouseenter／mouseleaveとmouseover／mouseoutの違い
mouseenter イベントと mouseleave イベント、および mouseover イベントと mouseout イベントは似たようなイベントであるため混同されることがありますが、それぞれに違いがあります。
mouseover イベントは、マウスカーソルが要素上に乗った時に発生します。要素内を移動するたびに、要素内の子要素にカーソルが乗ったとしても mouseover イベントが発生します。
mouseout イベントは、マウスカーソルが要素から離れた時に発生します。要素内から子要素に移動した場合でも mouseout イベントが発生します。
一方、mouseenter イベントは、マウスカーソルが要素上に乗った時に発生します。要素内を移動するたびに、要素内の子要素にカーソルが乗った場合でも、mouseenter イベントは発生しません。
同様に、mouseleave イベントは、マウスカーソルが要素から離れた時に発生します。要素内から子要素に移動した場合でも、mouseleave イベントが発生します。
つまり、mouseover イベントと mouseout イベントは、要素内の子要素上にマウスカーソルが乗った場合でもイベントが発生するのに対して、mouseenter イベントと mouseleave イベントは、要素内の子要素上にマウスカーソルが乗った場合はイベントが発生しない点が異なります。
focus／blurとfocusin／focusoutの違い
フォーム要素には、フォーカスが当たっている状態とそうでない状態があります。フォーカスが当たっている状態とは、キーボードやマウスの操作がそのフォーム要素に対して直接適用される状態を指します。フォーカスが当たっているフォーム要素は、ユーザーが操作可能な状態であることが多く、例えばテキストボックスに文字を入力するためには、まずフォーカスを当てる必要があります。
フォーカスが当たっている状態とそうでない状態を検知するために、 focus イベントと blur イベントがあります。これらのイベントは、フォーム要素がフォーカスを得たり失ったりしたときに発生します。
一方、focusin イベントと focusout イベントは、focus イベントと blur イベントと似たようなイベントですが、異なる点があります。focusin イベントと focusout イベントは、focus イベントと blur イベントと違って、イベントが発生する要素がネストしている場合に、親要素から子要素へのフォーカスの移動にも反応する点が異なります。
例えば、以下のように HTML 要素がネストしている場合、focus イベントは子要素にフォーカスが当たっている場合には発生しますが、focusin イベントは親要素にフォーカスが当たっている場合にも発生します。
<div id="parent">
<input type="text" id="child">
</div> つまり、focus イベントと blur イベントは、フォーム要素のフォーカスの移動に反応するイベントであり、focusin イベントと focusout イベントは、親子関係にある要素のフォーカスの移動にも反応するイベントであるという違いがあります。
上記の違いを確認するために、下記のサンプルコードを実行してみてください。focus イベントと blur イベント、および focusin イベントと focusout イベントが発生するタイミングが異なることがわかると思います。
リスキリングでキャリアアップしてみませんか？
リスキリング(学び直し)は、経済産業省が推奨しており、
今だけ、最大７０％のキャッシュバックを受けることができます。
最大70％の給付金が出るおすすめのプログラミングスクール！
国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！
興味のある方はすぐに確認しましょう。
まとめ
JavaScriptでブラウザ上で使えるイベントについて解説しました。
- イベントは、ユーザーアクションやページの状態変化に応じて発生する。
- マウスイベントには、click、mousedown、mouseup、mousemove、mouseenter、mouseleaveなどがある。
- キーボードイベントには、keydown、keyup、keypressなどがある。
- フォームイベントには、submit、reset、focus、blur、change、selectなどがある。
- その他のイベントには、load、unload、resize、scrollなどがある。
どんなイベントがあり、どういった使い方をしたら良いのかよくわかりました！
JavaScriptのイベントについて理解することは、Webページの動的なコンテンツを作成する上で重要です。イベントの発生タイミングや、イベントハンドラーの設定方法をしっかりと把握しておくことで、高度なWebアプリケーションを開発することができます。また、イベントの利用にあたっては、必ずアクセシビリティにも配慮するようにしましょう。