![MARKLEAPS[マークリープス]](https://markleaps.com/blog/wp-content/themes/mkl/images/00_logo.png){kind=logo}
Webページに「動き」をつけるためには、ユーザーの操作に反応する仕組みが必要です。
例えば、
・ボタンをクリックしたら処理を実行する
・入力フォームに文字が入力されたら値を取得する
といった処理は、すべて「イベント」をきっかけに実行されます。
この記事では、JavaScriptでイベントを扱うための基本であるaddEventListener の使い方を、初心者向けにわかりやすく解説します。
イベントとは？
イベントとは、ユーザーの操作や画面の変化によって発生する「きっかけ」のことです。
例えば、以下のようなものがイベントです。
- クリックされた（click）
- 文字が入力された（input）
- キーが押された（keydown）
- ページが読み込まれた（load）
JavaScriptでは、これらのイベントを検知して処理を実行することで、Webページに動きをつけることができます。
イベントリスナー（addEventListener）とは？
イベントリスナーとは、「特定のイベントが起きたときに処理を実行する仕組み」です。
JavaScriptでは、addEventListener というメソッドを使ってイベントを登録します。
例えば、「ボタンがクリックされたら処理を実行する」といったように、イベントと処理をセットで定義します。
addEventListenerの基本構文
基本構文
|
1 |
要素.addEventListener('イベント名', 関数); |
具体例
|
1 2 3 4 5 |
const button = document.querySelector('#btn'); button.addEventListener('click', function() { console.log('クリックされました'); }); |
よく使うイベント一覧
| イベント | 内容 |
|---|---|
| click | クリックした時 |
| input | 入力値が変更されるたび |
| change | 入力値が変更され、フォーカスが外れた時 |
| keydown | キーを押した時 |
| submit | フォーム送信時 |
| DOMContentLoaded | HTMLの読み込み・解析完了時 |
| load | （画像、css等含む）すべてのリソース読み込み完了時 |
| resize | ウィンドウサイズ変更時 |
| scroll | スクロール時 |
clickイベントの使用例
要素をクリックしたときに処理が実行されます。
HTML
|
1 |
<button id="btn">クリック</button> |
JavaScript
|
1 2 3 4 5 |
const button = document.querySelector('#btn'); button.addEventListener('click', function() { alert('ボタンがクリックされました'); }); |
inputイベントの使用例
入力するたびに処理が実行されます。
|
1 2 3 4 5 |
const input = document.querySelector('#text'); input.addEventListener('input', function() { console.log(input.value); }); |
changeイベントの使用例
入力後、フォーカスが外れたときに処理が実行されます。
|
1 2 3 |
input.addEventListener('change', function() { console.log('変更されました'); }); |
keydownイベントの使用例
キーが押されたときに処理が実行されます。
|
1 2 3 |
document.addEventListener('keydown', function(e) { console.log(e.key); }); |
例：「Enterキーが押されたときだけ処理する」場合
|
1 2 3 4 5 |
document.addEventListener('keydown', function(e) { if (e.key === 'Enter') { console.log('Enterキーが押されました'); } }); |
submitイベントの使用例
フォーム送信時に処理が実行されます。
HTML
|
1 2 3 4 |
<form id="form"> <input type="text" id="name"> <button type="submit">送信</button> </form> |
JaveScript
|
1 2 3 4 5 |
const form = document.querySelector('#form'); form.addEventListener('submit', function() { console.log('フォームが送信されました'); }); |
DOMContentLoadedイベントの使用例
HTMLの解析が完了したタイミングで処理が実行されます。
|
1 2 3 |
document.addEventListener('DOMContentLoaded', function() { console.log('HTMLの解析が完了しました'); }); |
loadイベントの使用例
ページ内のすべてのリソース（画像、CSS、iframeなどを含む）が読み込まれた後に処理が実行されます。
|
1 2 3 |
window.addEventListener('load', function() { console.log('ページの読み込みが完了しました'); }); |
resizeイベントの使用例
ウィンドウサイズが変更されたときに処理が実行されます。
|
1 2 3 |
window.addEventListener('resize', function() { console.log('画面サイズが変更されました'); }); |
画面幅に応じたレイアウト調整などに使用されます。
scrollイベントの使用例
スクロールに応じて処理が実行されます。
|
1 2 3 |
window.addEventListener('scroll', function() { console.log(window.scrollY); }); |
スクロール位置に応じたUI制御などに使用されます。
まとめ
- イベントは「ユーザー操作のきっかけ」
addEventListenerでイベントを登録する- クリック・入力・キーボードなど様々なイベントがある
イベントリスナーを使うことで、ユーザーの操作に応じた処理を実装できるようになります。