JavaScriptにおけるイベントハンドラの使い方を完全ガイド！20選の実践サンプルコード付き

<button id='helloButton'>押す</button>
<p id='message'></p>

<script>
const button = document.getElementById('helloButton');
const message = document.getElementById('message');

button.addEventListener('click', () => {
  message.textContent = 'クリックされました';
});
</script>

<button id='saveButton'>保存</button>
<p id='status'>未保存</p>

<script>
const saveButton = document.getElementById('saveButton');
const status = document.getElementById('status');

saveButton.addEventListener('click', () => {
  status.textContent = '保存待ちの処理を受け付けました';
});
</script>

<div id='notice' style='padding:16px;background:#dbeafe;'>お知らせ</div>

<script>
const notice = document.getElementById('notice');

notice.addEventListener('mouseenter', () => {
  notice.style.backgroundColor = '#fde68a';
});

notice.addEventListener('mouseleave', () => {
  notice.style.backgroundColor = '#dbeafe';
});
</script>

<input id='shortcutInput' placeholder='Enterで確定'>
<p id='shortcutMessage'></p>

<script>
const shortcutInput = document.getElementById('shortcutInput');
const shortcutMessage = document.getElementById('shortcutMessage');

shortcutInput.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    shortcutMessage.textContent = `入力値: ${shortcutInput.value}`;
  }
});
</script>

<form id='signupForm'>
  <label>メール <input id='email' type='email' required></label>
  <button type='submit'>登録</button>
</form>
<p id='formMessage'></p>

<script>
const signupForm = document.getElementById('signupForm');
const email = document.getElementById('email');
const formMessage = document.getElementById('formMessage');

signupForm.addEventListener('submit', (event) => {
  event.preventDefault();
  formMessage.textContent = email.value.includes('@')
    ? '送信可能な形式です'
    : 'メールアドレスの形式を確認してください';
});
</script>

<div id='area' style='position:relative;width:280px;height:160px;border:1px solid #ccc;'>
  <div id='card' style='position:absolute;width:64px;height:64px;background:#bfdbfe;cursor:grab;'></div>
</div>

<script>
const card = document.getElementById('card');
let dragging = false;
let offsetX = 0;
let offsetY = 0;

card.addEventListener('pointerdown', (event) => {
  dragging = true;
  offsetX = event.offsetX;
  offsetY = event.offsetY;
  card.setPointerCapture(event.pointerId);
});

card.addEventListener('pointermove', (event) => {
  if (!dragging) return;
  card.style.left = `${event.clientX - offsetX}px`;
  card.style.top = `${event.clientY - offsetY}px`;
});

card.addEventListener('pointerup', () => {
  dragging = false;
});
</script>

<div id='slideText'>スライドA</div>
<button id='prevSlide'>前へ</button>
<button id='nextSlide'>次へ</button>

<script>
const slides = ['スライドA', 'スライドB', 'スライドC'];
const slideText = document.getElementById('slideText');
let current = 0;

function renderSlide() {
  slideText.textContent = slides[current];
}

document.getElementById('prevSlide').addEventListener('click', () => {
  current = (current + slides.length - 1) % slides.length;
  renderSlide();
});

document.getElementById('nextSlide').addEventListener('click', () => {
  current = (current + 1) % slides.length;
  renderSlide();
});
</script>

<button id='openModal'>開く</button>
<div id='modal' hidden>
  <p>設定画面</p>
  <button id='closeModal'>閉じる</button>
</div>

<script>
const modal = document.getElementById('modal');

document.getElementById('openModal').addEventListener('click', () => {
  modal.hidden = false;
});

document.getElementById('closeModal').addEventListener('click', () => {
  modal.hidden = true;
});
</script>

<button class='accordion' aria-expanded='false'>詳細</button>
<div class='panel' hidden>追加の説明文です。</div>

<script>
const accordion = document.querySelector('.accordion');
const panel = document.querySelector('.panel');

accordion.addEventListener('click', () => {
  const opened = accordion.getAttribute('aria-expanded') === 'true';
  accordion.setAttribute('aria-expanded', String(!opened));
  panel.hidden = opened;
});
</script>

<button class='tab' data-panel='panelA'>A</button>
<button class='tab' data-panel='panelB'>B</button>
<div id='panelA'>Aの内容</div>
<div id='panelB' hidden>Bの内容</div>

<script>
const tabs = document.querySelectorAll('.tab');
const panels = ['panelA', 'panelB'].map((id) => document.getElementById(id));

tabs.forEach((tab) => {
  tab.addEventListener('click', () => {
    panels.forEach((panel) => {
      panel.hidden = panel.id !== tab.dataset.panel;
    });
  });
});
</script>

<input id='searchBox' placeholder='果物名を検索'>
<ul id='results'></ul>

<script>
const items = ['Apple', 'Banana', 'Cherry', 'Grape', 'Orange'];
const searchBox = document.getElementById('searchBox');
const results = document.getElementById('results');

searchBox.addEventListener('input', () => {
  const keyword = searchBox.value.toLowerCase();
  results.innerHTML = '';

  items
    .filter((item) => item.toLowerCase().includes(keyword))
    .forEach((item) => {
      const li = document.createElement('li');
      li.textContent = item;
      results.appendChild(li);
    });
});
</script>

<button id='toggleLog'>ログ切り替え</button>
<button id='targetButton'>対象ボタン</button>

<script>
const toggleLog = document.getElementById('toggleLog');
const targetButton = document.getElementById('targetButton');
let enabled = false;

function logClick() {
  console.log('対象ボタンが押されました');
}

toggleLog.addEventListener('click', () => {
  enabled = !enabled;

  if (enabled) {
    targetButton.addEventListener('click', logClick);
  } else {
    targetButton.removeEventListener('click', logClick);
  }
});
</script>

const userEvent = new CustomEvent('user:login', {
  detail: { name: 'Sato' }
});

document.addEventListener('user:login', (event) => {
  console.log(`${event.detail.name}さんがログインしました`);
});

document.dispatchEvent(userEvent);

<ul id='taskList'>
  <li>設計</li>
  <li>実装</li>
</ul>

<script>
const taskList = document.getElementById('taskList');

taskList.addEventListener('click', (event) => {
  if (event.target.matches('li')) {
    event.target.classList.toggle('done');
  }
});
</script>

<button id='pauseButton'>一時停止</button>
<button id='countButton'>加算</button>
<p id='countText'>0</p>

<script>
let paused = false;
let count = 0;
const countText = document.getElementById('countText');

document.getElementById('pauseButton').addEventListener('click', () => {
  paused = !paused;
});

document.getElementById('countButton').addEventListener('click', () => {
  if (paused) return;
  count += 1;
  countText.textContent = String(count);
});
</script>

<button id='editMode'>編集モード切り替え</button>
<div id='editableBox'>クリック対象</div>

<script>
const editableBox = document.getElementById('editableBox');
let editing = false;

function selectBox() {
  editableBox.textContent = '選択中';
}

document.getElementById('editMode').addEventListener('click', () => {
  editing = !editing;
  if (editing) {
    editableBox.addEventListener('click', selectBox);
  } else {
    editableBox.removeEventListener('click', selectBox);
    editableBox.textContent = 'クリック対象';
  }
});
</script>

<button id='loadButton'>読み込み</button>
<p id='loadStatus'>待機中</p>

<script>
const loadStatus = document.getElementById('loadStatus');

function waitData() {
  return new Promise((resolve) => {
    setTimeout(() => resolve('データを受け取りました'), 600);
  });
}

document.getElementById('loadButton').addEventListener('click', async () => {
  loadStatus.textContent = '読み込み中';
  loadStatus.textContent = await waitData();
});
</script>

<button id='showImageButton'>画像を表示</button>
<p id='imageStatus'>準備中</p>

<script>
const imageStatus = document.getElementById('imageStatus');
let ready = false;
const image = new Image();

image.addEventListener('load', () => {
  ready = true;
  imageStatus.textContent = '画像を表示できます';
});

image.addEventListener('error', () => {
  imageStatus.textContent = '画像を読み込めませんでした';
});

image.src = '/sample-image.jpg';

document.getElementById('showImageButton').addEventListener('click', () => {
  if (ready) document.body.appendChild(image);
});
</script>

<a href='#targetSection' id='scrollLink'>対象へ移動</a>
<div style='height:600px'></div>
<section id='targetSection'>移動先</section>

<script>
document.getElementById('scrollLink').addEventListener('click', (event) => {
  event.preventDefault();
  document.getElementById('targetSection').scrollIntoView({
    behavior: 'smooth'
  });
});
</script>

<style>
.fadeTarget { opacity: 0; transition: opacity .4s; }
.fadeTarget.visible { opacity: 1; }
</style>
<div class='fadeTarget'>表示領域に入ると表示</div>

<script>
const fadeTarget = document.querySelector('.fadeTarget');

function checkVisible() {
  const rect = fadeTarget.getBoundingClientRect();
  if (rect.top < window.innerHeight) {
    fadeTarget.classList.add('visible');
  }
}

window.addEventListener('scroll', checkVisible);
window.addEventListener('load', checkVisible);
</script>

<p id='sizeLabel'></p>

<script>
const sizeLabel = document.getElementById('sizeLabel');

function updateSizeLabel() {
  sizeLabel.textContent = window.innerWidth >= 768
    ? 'デスクトップ幅'
    : 'モバイル幅';
}

window.addEventListener('resize', updateSizeLabel);
window.addEventListener('load', updateSizeLabel);
</script>

<button id='themeButton'>ダークモード</button>

<script>
const themeButton = document.getElementById('themeButton');

themeButton.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
  const dark = document.body.classList.contains('dark-mode');
  themeButton.textContent = dark ? 'ライトモード' : 'ダークモード';
});
</script>