- はじめに
- JavaScriptイベントとは
- JavaScriptイベント一覧
- イベントの対処法と注意点
- イベントのカスタマイズ
- ○イベント1:onclick
- ○イベント2:ondblclick
- ○イベント3:onmousedown
- ○イベント4:onmouseup
- ○イベント5:onmousemove
- ○イベント6:onmouseover
- ○イベント7:onmouseout
- ○イベント8:onmouseenter
- ○イベント9:onmouseleave
- ○イベント10:onkeydown
- ○イベント11:onkeyup
- ○イベント12:onkeypress
- ○イベント13:onfocus
- ○イベント14:onblur
- ○イベント15:onchange
- ○イベント16:onsubmit
- ○イベント17:onreset
- ○イベント18:onload
- ○イベント19:onunload
- ○イベント20:onresize
- ○イベント21:onscroll
- ○イベント22:ondragstart
- ○イベント23:ondragend
- ○イベント24:ondragenter
- ○イベント25:ondragleave
- ○イベント26:ondragover
- ○イベント27:ondrop
- ○イベント28:oncontextmenu
- ○イベント29:onwheel
- ○イベント30:onbeforeunload
- ●応用例とサンプルコード
- まとめ
はじめに
この記事を読めば、JavaScriptイベントを使ってウェブアプリケーションを効果的に開発することができるようになります。
JavaScriptイベントとは
JavaScriptイベントは、ブラウザ上で起こる様々な動作や変化を検出し、それに応じてJavaScriptのコードを実行するための仕組みです。
JavaScriptイベント一覧
JavaScriptには多くのイベントが用意されており、下記はその一部です。
- onclick:要素がクリックされたときに発生
- ondblclick:要素がダブルクリックされたときに発生
- onmousedown:マウスボタンが押されたときに発生
- onmouseup:マウスボタンが離されたときに発生
- onmousemove:マウスカーソルが要素上で移動したときに発生
- onmouseover:マウスカーソルが要素に入ったときに発生
- onmouseout:マウスカーソルが要素から出たときに発生
- onmouseenter:マウスカーソルが要素に入ったときに発生(子要素には伝播しない)
- onmouseleave:マウスカーソルが要素から出たときに発生(子要素には伝播しない)
- onkeydown:キーが押されたときに発生
- onkeyup:キーが離されたときに発生
- onkeypress:キーが押されたときに発生(特定の文字キーのみ)
- onsubmit:フォームが送信されるときに発生
- onreset:フォームがリセットされるときに発生
- onchange:フォーム要素の値が変更されたときに発生
- oninput:フォーム要素の値が変更される度に発生
- onfocus:要素がフォーカスを受け取ったときに発生
- onblur:要素がフォーカスを失ったときに発生
- onload:ページや要素が読み込まれたときに発生
- onunload:ページが閉じられるときに発生
- onbeforeunload:ページが閉じられる直前に発生
- onerror:エラーが発生したときに発生
- onresize:ウィンドウや要素のサイズが変更されたときに発生
- onscroll:要素がスクロールされたときに発生
- oncontextmenu:コンテキストメニューが表示されるときに発生
- onselect:テキストが選択されたときに発生
- ondrag:要素がドラッグされているときに発生
- ondragstart:要素のドラッグが開始されたときに発生
- ondragend:要素のドラッグが終了したときに発生
- onwheel:マウスホイールが操作されたときに発生
イベントの使い方 イベントは主に2つの方法で使われます。
○イベントハンドラー
HTML要素に直接イベント属性を追加する方法です。
例えば、ボタンがクリックされたときにアラートを表示する場合、下記のように記述します。
<button onclick="alert('クリックされました!')">クリックしてください</button>
○イベントリスナー
JavaScriptコード内でイベントリスナーを追加する方法です。
例えば、ボタンがクリックされたときにアラートを表示する場合、下記のように記述します。
<button id="myButton">クリックしてください</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('クリックされました!');
});
</script>
イベントの対処法と注意点
イベントを使用する際には、下記のような注意点があります。
- イベントの伝播:イベントは親要素から子要素へ(キャプチャフェーズ)、子要素から親要素へ(バブリングフェーズ)伝播します。
これを防ぐには、event.stopPropagation()
を使用します。 - イベントのデフォルト動作のキャンセル:イベントにはデフォルトの動作があります(例:リンクのクリックでページ遷移)。
これをキャンセルするには、event.preventDefault()
を使用します。
イベントのカスタマイズ
イベントはカスタマイズすることができます。
例えば、特定のキーが押されたときにイベントを発火させる場合、下記のように記述します。
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
alert('エンターキーが押されました!');
}
});
30個のイベントとサンプルコード それぞれのイベントについて、簡単なサンプルコードを紹介します。
○イベント1:onclick
ボタンがクリックされたときにアラートを表示する例です。
<button onclick="alert('クリックされました!')">クリックしてください</button>
○イベント2:ondblclick
要素がダブルクリックされたときにアラートを表示する例です。
<p ondblclick="alert('ダブルクリックされました!')">ダブルクリックしてください</p>
○イベント3:onmousedown
マウスボタンが押されたときにアラートを表示する例です。
<div onmousedown="alert('マウスボタンが押されました!')" style="width: 100px; height: 100px; background-color: lightblue;">マウスボタンを押してください</div>
○イベント4:onmouseup
マウスボタンが離されたときにアラートを表示する例です。
<div onmouseup="alert('マウスボタンが離されました!')" style="width: 100px; height: 100px; background-color: lightgreen;">マウスボタンを離してください</div>
○イベント5:onmousemove
マウスカーソルが要素上で移動したときにアラートを表示する例です。
<div onmousemove="alert('マウスカーソルが移動しました!')" style="width: 100px; height: 100px; background-color: lightyellow;">マウスカーソルを移動してください</div>
○イベント6:onmouseover
マウスカーソルが要素に入ったときにアラートを表示する例です。
<div onmouseover="alert('マウスカーソルが要素に入りました!')" style="width: 100px; height: 100px; background-color: lightpink;">マウスカーソルを要素に入れてください</div>
○イベント7:onmouseout
マウスカーソルが要素から出たときにアラートを表示する例です。
<div onmouseout="alert('マウスカーソルが要素から出ました!')" style="width: 100px; height: 100px; background-color: lightgray;">マウスカーソルを要素から出してください</div>
○イベント8:onmouseenter
マウスカーソルが要素に入ったときにアラートを表示する例です(子要素には伝播しない)。
<div onmouseenter="alert('マウスカーソルが要素に入りました!')" style="width: 100px; height: 100px; background-color: lightsalmon;">マウスカーソルを要素に入れてください</div>
○イベント9:onmouseleave
マウスカーソルが要素から出たときにアラートを表示する例です(子要素には伝播しない)。
<div onmouseleave="alert('マウスカーソルが要素から出ました!')" style="width: 100px; height: 100px; background-color: lightcyan;">マウスカーソルを要素から出してください</div>
○イベント10:onkeydown
キーが押されたときにアラートを表示する例です。
<input type="text" onkeydown="alert('キーが押されました!')" placeholder="キーを押してください">
○イベント11:onkeyup
キーが離されたときにアラートを表示する例です。
<input type="text" onkeyup="alert('キーが離されました!')" placeholder="キーを離してください">
○イベント12:onkeypress
キーが押されたときにアラートを表示する例です(特殊キーは除く)。
<input type="text" onkeypress="alert('キーが押されました!')" placeholder="キーを押してください">
○イベント13:onfocus
要素がフォーカスを受け取ったときにアラートを表示する例です。
<input type="text" onfocus="alert('フォーカスが当たりました!')" placeholder="フォーカスしてください">
○イベント14:onblur
要素がフォーカスを失ったときにアラートを表示する例です。
<input type="text" onblur="alert('フォーカスが外れました!')" placeholder="フォーカスを外してください">
○イベント15:onchange
入力要素の値が変更されたときにアラートを表示する例です。
<select onchange="alert('値が変更されました!')"> <option>選択してください</option> <option>オプション1</option> <option>オプション2</option> </select>
○イベント16:onsubmit
フォームが送信されたときにアラートを表示する例です。
<form onsubmit="event.preventDefault(); alert('フォームが送信されました!');">
<input type="submit" value="送信">
</form>
○イベント17:onreset
フォームがリセットされたときにアラートを表示する例です。
<form onreset="alert('フォームがリセットされました!');">
<input type="reset" value="リセット">
</form>
○イベント18:onload
ページが読み込まれたときにアラートを表示する例です。
<body onload="alert('ページが読み込まれました!');">
○イベント19:onunload
ページが閉じられたときにアラートを表示する例です(一部のブラウザではサポートされていません)。
<body onunload="alert('ページが閉じられました!');">
○イベント20:onresize
ウィンドウがリサイズされたときにアラートを表示する例です。
<body onresize="alert('ウィンドウがリサイズされました!');">
○イベント21:onscroll
要素がスクロールされたときにアラートを表示する例です。
<div onscroll="alert('スクロールしました!');" style="width: 100px; height: 100px; overflow: auto;">
<div style="width: 1000px; height: 1000px; background-color: lightblue;"></div>
</div>
○イベント22:ondragstart
要素がドラッグされ始めたときにアラートを表示する例です。
<div draggable="true" ondragstart="alert('ドラッグが始まりました!');" style="width: 100px; height: 100px; background-color: lightblue;">ドラッグしてください</div>
○イベント23:ondragend
要素がドラッグ終了したときにアラートを表示する例です。
<div draggable="true" ondragend="alert('ドラッグが終わりました!');" style="width: 100px; height: 100px; background-color: lightgreen;">ドラッグしてください</div>
○イベント24:ondragenter
要素にドラッグされた要素が入ったときにアラートを表示する例です。
<div ondragenter="alert('ドラッグされた要素が入りました!');" style="width: 100px; height: 100px; background-color: lightyellow;">ここにドラッグしてください</div>
○イベント25:ondragleave
要素からドラッグされた要素が出たときにアラートを表示する例です。
<div ondragleave="alert('ドラッグされた要素が出ました!');" style="width: 100px; height: 100px; background-color: lightpink;">ここからドラッグしてください</div>
○イベント26:ondragover
要素上でドラッグされた要素が動かされているときにアラートを表示する例です。
<div ondragover="event.preventDefault(); alert('ドラッグされた要素が動かされています!');" style="width: 100px; height: 100px; background-color: lightgray;">ここでドラッグしてください</div>
○イベント27:ondrop
要素上でドラッグされた要素がドロップされたときにアラートを表示する例です。
<div ondrop="event.preventDefault(); alert('ドラッグされた要素がドロップされました!');" style="width: 100px; height: 100px; background-color: lightsalmon;">ここにドロップしてください</div>
○イベント28:oncontextmenu
要素上で右クリックしたときにカスタムコンテキストメニューを表示する例です。
<div oncontextmenu="event.preventDefault(); alert('カスタムコンテキストメニューを表示します!');" style="width: 100px; height: 100px; background-color: lightcyan;">右クリックしてください</div>
○イベント29:onwheel
要素上でマウスホイールを操作したときにアラートを表示する例です。
<div onwheel="alert('マウスホイールを操作しました!');" style="width: 100px; height: 100px; background-color: lightcoral;">ここでマウスホイールを操作してください</div>
○イベント30:onbeforeunload
ページを離れるときに確認ダイアログを表示する例です。
<script>
window.addEventListener('beforeunload', function(event) {
event.preventDefault();
event.returnValue = 'ページを離れる前に確認ダイアログを表示しますか?';
});
</script>
●応用例とサンプルコード
ここでは、いくつかのJavaScriptイベントを組み合わせた応用例とサンプルコードを紹介します。
○応用例1:ドラッグ&ドロップ機能
ondragstart、ondragover、ondropイベントを使って、ドラッグ&ドロップ機能を実装する例です。
<style>
.dropzone {
width: 200px;
height: 200px;
border: 2px dashed gray;
text-align: center;
padding-top: 80px;
}
.draggable {
width: 100px;
height: 100px;
background-color: lightblue;
cursor: move;
}
</style>
<script>
function allowDrop(event) {
event.preventDefault();
}
function drag(event) {
event.dataTransfer.setData('text', event.target.id);
}
function drop(event) {
event.preventDefault();
var data = event.dataTransfer.getData('text');
event.target.appendChild(document.getElementById(data));
}
</script>
<div class="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">ここにドロップしてください</div>
<div id="item" draggable="true" ondragstart="drag(event)" class="draggable">ドラッグしてください</div>
○応用例2:スライドショー
onclickイベントを使って、シンプルなスライドショーを作成する例です。
<style>
.slides {
display: none;
}
.active {
display: block;
}
</style>
<script>
var slideIndex = 1;
function showSlides(n) {
var slides = document.getElementsByClassName('slides');
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
slides[slideIndex - 1].style.display = 'block';
}
function changeSlides(n) {
showSlides(slideIndex += n);
}
showSlides(slideIndex);
</script>
<img class="slides" src="https://via.placeholder.com/500x300?text=Slide+1" />
<img class="slides" src="https://via.placeholder.com/500x300?text=Slide+2" />
<img class="slides" src="https://via.placeholder.com/500x300?text=Slide+3" />
<button onclick="changeSlides(-1)">前へ</button>
<button onclick="changeSlides(1)">次へ</button>
○応用例3:リアルタイム検索
oninputイベントを使って、入力内容に応じてリストからリアルタイムで検索結果を表示する例です。
<input type="text" id="searchInput" oninput="search()" placeholder="検索...">
<ul id="searchList">
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
<li>Date</li>
<li>Fig</li>
<li>Grape</li>
</ul>
<script>
function search() {
var input, filter, ul, li, i, txtValue;
input = document.getElementById('searchInput');
filter = input.value.toUpperCase();
ul = document.getElementById('searchList');
li = ul.getElementsByTagName('li');
for (i = 0; i < li.length; i++) {
txtValue = li[i].textContent || li[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = '';
} else {
li[i].style.display = 'none';
}
}
}
</script>
まとめ
この記事では、JavaScriptイベントの一覧とそれぞれの簡単な説明、サンプルコードを紹介しました。
また、応用例としてドラッグ&ドロップ機能、スライドショー、リアルタイム検索のサンプルコードも提供しました。
これらのイベントを組み合わせることで、さまざまなインタラクティブなWebアプリケーションを作成することができます。
JavaScriptイベントを理解し、活用して素晴らしいWebページを作成してみましょう!