2026年4月16日
JavaScript onclick とは？イベント処理の基本
「ボタンをクリックしたら何かが起きる」「マウスを乗せたら色が変わる」——こういった動きを作るのが イベント処理 です。
イベント（event）とは、ユーザーの操作（クリック・キー入力・マウス移動など）のことです。JavaScriptでは、イベントが起きたときに実行する処理を登録できます。
この記事では、JavaScript onclick の使い方を中心に、イベント処理の基本をわかりやすく解説します。
イベントを登録する2つの方法
方法①：HTML属性に直接書く（onclick属性）
HTMLタグの中に onclick="..." と書く方法です。シンプルですが、小規模な用途向けです。
<button onclick="alert('クリックされました！')">クリック</button>方法②：addEventListener（推奨）
JavaScriptのコードの中でイベントを登録する方法です。より柔軟で、複数の処理を登録できます。
const btn = document.getElementById('myBtn');
btn.addEventListener('click', function() {
alert('クリックされました！');
});💡 どちらを使うべき？
実際の開発では addEventListener を使うのが一般的です。HTMLとJavaScriptを分けて書けるので、コードが整理しやすくなります。
🔥 文字列操作入門で実践してみましょう。
よく使うイベントの種類
| イベント名 | 発生するタイミング |
|---|---|
click | 要素をクリックしたとき |
mouseover | マウスを要素の上に乗せたとき |
mouseout | マウスが要素から離れたとき |
keydown | キーボードのキーを押したとき |
input | 入力欄の値が変わったとき |
submit | フォームが送信されたとき |
DOMContentLoaded | HTMLの読み込みが完了したとき |
💡 fetch入門で基礎を確認できます。
ハンズオン：イベントを使ったページを作ろう
クリック・マウスオーバー・入力の3種類のイベントを試せるページを作ってみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>イベント練習</title>
<style>
#box {
width: 200px; height: 80px;
background-color: #0d9488;
color: white;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
cursor: pointer;
margin: 16px 0;
}
</style>
</head>
<body>
<h1>イベント練習</h1>
<!-- クリックイベント -->
<button id="btn">クリックしてね</button>
<p id="result"></p>
<!-- マウスオーバーイベント -->
<div id="box">マウスを乗せてね</div>
<!-- 入力イベント -->
<input type="text" id="nameInput" placeholder="名前を入力">
<p id="preview"></p>
<script>
// クリックイベント
document.getElementById('btn').addEventListener('click', function() {
document.getElementById('result').textContent = 'クリックされました！';
});
// マウスオーバーイベント
const box = document.getElementById('box');
box.addEventListener('mouseover', function() {
box.style.backgroundColor = '#f59e0b';
});
box.addEventListener('mouseout', function() {
box.style.backgroundColor = '#0d9488';
});
// 入力イベント
document.getElementById('nameInput').addEventListener('input', function() {
const val = this.value;
document.getElementById('preview').textContent = 'こんにちは、' + val + 'さん！';
});
</script>
</body>
</html>🔗 あわせてJavaScript問題ドリルもチェックしてみましょう。
eventオブジェクトを使う
イベントが発生すると、処理の関数に eventオブジェクト が渡されます。これを使うと、どのキーが押されたかなどの情報を取得できます。
document.addEventListener('keydown', function(event) {
console.log('押されたキー：' + event.key);
});
// フォーム送信のデフォルト動作をキャンセルする
document.getElementById('myForm').addEventListener('submit', function(event) {
event.preventDefault(); // ページのリロードを防ぐ
console.log('送信処理をJavaScriptで行う');
});イベント処理でよく使うパターン
イベント処理にはよく使うパターンがあります。覚えておくと、さまざまな場面で応用できます。
パターン1：ボタンクリックで表示を切り替える
ボタンを押すたびに、要素の表示と非表示を切り替えるパターンです。classListのtoggleメソッドを使えば、1行で実現できます。メニューの開閉やアコーディオンに使えます。
パターン2：入力内容をリアルタイムで反映する
テキスト入力欄にinputイベントを設定すると、文字を打つたびに処理が実行されます。入力した文字数を表示したり、プレビューを更新したりするのに使えます。
パターン3：フォーム送信時にチェックする
submitイベントを使うと、フォームが送信される前に入力内容をチェックできます。空欄がないか、メールアドレスの形式が正しいかなどを確認して、問題があれば送信を止められます。
パターン4：ページ読み込み完了後に処理を実行する
DOMContentLoadedイベントを使うと、HTMLの読み込みが完了したタイミングで処理を実行できます。ページが表示されたらすぐに動かしたい処理に使います。
イベント処理の前提知識として、DOM操作の基本を知っておくと理解が深まります。「JavaScriptでHTMLを操作する方法」で要素の取得や変更の方法を学べます。
イベント処理でよくあるミス
ミス1：要素が見つかる前にイベントを登録しようとする
scriptタグがHTMLの上部にあると、まだ要素が読み込まれていない状態でaddEventListenerを実行してしまいます。scriptタグはbodyの閉じタグの直前に置くか、DOMContentLoadedイベントの中で登録しましょう。
ミス2：関数を呼び出してしまう
addEventListenerの第2引数には関数名だけを書きます。丸かっこをつけると、その場で関数が実行されてしまいます。「handleClick」と書くのが正しく、「handleClick()」と書くのは間違いです。
ミス3：イベントオブジェクトを活用していない
イベントが発生すると、イベントオブジェクトが自動で渡されます。この中にはクリックされた要素やキーボードのキー情報などが入っています。活用すると、より柔軟な処理が書けます。
JavaScriptの基本がまだ不安な人は「JavaScriptとは？初心者向けにわかりやすく解説」を先に読んでおきましょう。また、イベント処理では関数を多用するので「JavaScript関数入門」も合わせて確認すると理解が深まります。
まとめ
- ✅ イベント：ユーザーの操作（クリック・入力など）のこと
- ✅
addEventListener('イベント名', 関数)でイベントを登録する - ✅
click・mouseover・input・submitなどよく使うイベントを覚えよう - ✅
event.preventDefault()でデフォルトの動作をキャンセルできる - ✅ onclick属性より
addEventListenerを使うほうが柔軟で推奨
イベント処理はJavaScriptの核心です。レッスンでさらに実践的な使い方を学んでみましょう。
イベント体験プレイグラウンドで試してみよう
click・keydown・mouseover など8種のイベントを開発者ツール不要でリアルタイム体験。
🚀 JavaScriptをレッスンで学ぼう！
このサイトのJavaScriptコースでは、イベント処理を使った実践的なページ作りをブラウザだけで学べます。無料・登録不要です。
JavaScriptコースを見る →