【JavaScript】クリックイベントとは？初心者にもわかりやすく実務例つきで解説

フロントエンド開発•
JavaScript

はじめに

皆さんはウェブページ上のボタンを押したり、画像をクリックしたりしたときに、画面上で何らかの動きが起きることを見かけたことがあるのではないでしょうか。
この動きを実現するのがJavaScriptのクリックイベントです。
クリックイベントを活用すれば、ページの特定要素を切り替えたり、モーダルウィンドウを表示したり、サーバーにリクエストを送ったりと、さまざまな機能を実装することができます。

本記事では、クリックイベントの基礎的な概念とコードの書き方を、初心者の方にもわかりやすいように解説します。
さらに、実際の業務でどのように役立つかをイメージできるよう、実務例も盛り込みます。
クリックイベントは基本的なトピックに見えて、実は業務で登場する頻度がとても高い要素です。
基本を押さえることで、スムーズなUIの実装やメンテナンスしやすいコードを書く土台作りに役立つでしょう。

この記事を通じて、ウェブアプリケーションをより使いやすいものにするための手がかりを学んでみてください。
それでは早速始めていきましょう。

この記事を読むとわかること

  • クリックイベントの基礎的な仕組み
  • onclickやaddEventListenerを使ったコードの書き方
  • イベントバブリングとキャプチャリングの概念
  • 複数要素を同時に扱う方法やイベントデリゲーション
  • 実務に役立つ具体的な活用例と注意点

これらを理解すれば、JavaScriptを使った動きのあるUIを自在に作りやすくなります。

クリックイベントとは何か

クリックイベントは、ユーザーがマウスやタッチパッドで要素をクリックした瞬間に発生するイベントのことです。
ブラウザ側でイベントとして検出し、対応する処理を実行する仕組みになっています。
たとえば、ボタンをクリックしたときにアラートを表示したり、フォームを送信したりするのもクリックイベントを使った一例です。

初心者の方は、これを「ボタンが押された瞬間に何かの関数を動かす仕組み」とイメージするといいかもしれません。
このイベントを捉える方法はいくつか存在しますが、HTMLのタグに直接書き込むやり方と、JavaScriptのコードでイベントリスナーを設定するやり方の2パターンを押さえておくと便利です。
後ほど詳しく解説しますが、実務では可読性や保守性を考慮して、JavaScriptファイルからイベントリスナーを追加する方法が多用されます。

なぜこういったイベントが必要なのかというと、ウェブアプリケーションの多くが「ユーザーのアクション」に応じて処理を切り替える必要があるからです。
特にクリックイベントは最も基本的なユーザー操作であり、サイト上のインタラクションを構築する起点となることがよくあります。
それだけに、初心者のうちにしっかりと仕組みを理解しておくと、後々の開発でスムーズにコードが書けるようになるはずです。

クリックイベントの基本的な書き方

クリックイベントを扱う方法は大まかに2つあります。
ひとつ目はHTML要素に直接onclick属性を使う方法、ふたつ目はJavaScriptファイルでaddEventListenerを利用する方法です。
どちらを使うかはプロジェクトや好みによって異なりますが、実務的には可読性が高いaddEventListenerの方を採用することが多い印象があります。
ここでは両方の基本形を見ていきましょう。

HTML内でonclickを使う方法

HTML側の要素に直接属性を指定して、その要素がクリックされたときに実行させたい関数を呼び出す書き方です。
以下のように、ボタン要素のonclick属性にJavaScriptのコードを書きます。

<button onclick="alert('ボタンがクリックされました')">
  クリックしてメッセージを表示
</button>

このコードでは、ボタンが押された瞬間にalert('ボタンがクリックされました')が実行されます。
非常にシンプルですが、HTMLとJavaScriptのロジックが同じファイル内で混ざってしまうため、大規模な開発では管理が難しくなるケースがあります。
しかし、プロトタイプや簡易的なデモ作成など、即座に試したい状況では手軽さが魅力です。

addEventListenerを使う方法

よりよく使われるのが、JavaScriptファイル内でDOM要素に対してイベントリスナーを設定する方法です。
例えば以下のような書き方をします。

<!-- HTML部分 -->
<button id="myButton">メッセージを表示</button>

<!-- JavaScript部分 (別ファイルでもOK) -->
<script>
  const button = document.getElementById("myButton");
  button.addEventListener("click", function() {
    alert("ボタンがクリックされました");
  });
</script>

document.getElementByIdでボタン要素を取得し、その要素に対してaddEventListener("click", ...)を呼び出すことで、クリックされたときに指定した関数が動きます。
この方法だとJavaScriptのコードがHTMLから独立しやすく、コードの可読性と保守性が向上します。
また、イベント名を引数で指定しているので、クリック以外のイベントにも柔軟に対応できます。

イベントリスナーを削除する方法

実務では「一度だけクリックできる」など、特定の状況でイベントを解除したいケースもあります。
addEventListenerで紐づけたイベントを削除する際には、removeEventListenerを利用します。
ただし、削除するには同じ関数の参照が必要になるので、無名関数ではなく変数で関数を定義しておくと管理しやすいでしょう。

function handleClick() {
  alert("一度だけメッセージを表示します");
  button.removeEventListener("click", handleClick);
}

const button = document.getElementById("myButton");
button.addEventListener("click", handleClick);

この例では、ユーザーがボタンをクリックするとアラートが出たあと、removeEventListenerによって同じイベントを解除しています。
以後、このボタンをクリックしてもイベントは発火しません。
このように、コード側で明示的にイベント管理をできる点もaddEventListenerの利点のひとつです。

イベントオブジェクトの活用方法

クリックイベントが発生した際、JavaScript側では「イベントオブジェクト」が用意されます。
イベントオブジェクトとは、クリックした要素や座標情報など、さまざまな詳細を含む特別なオブジェクトのことです。
実装の際には、イベントリスナーのコールバック関数の引数にeventやeといった名前で受け取ることが多いでしょう。

イベントオブジェクトのプロパティ

イベントオブジェクトには以下のようなプロパティが含まれます。

  • target：イベントが発生した要素を指す
  • currentTarget：イベントリスナーを設定した要素を指す
  • clientX / clientY：クリックされた位置の座標（ブラウザ表示領域内）
  • pageX / pageY：クリック位置の座標（ページ全体）
  • preventDefault()：デフォルトの動作（リンククリックでのページ遷移など）を止める
  • stopPropagation()：イベントの伝搬を止める

これらはすべてを覚える必要はありませんが、たとえば右クリックの検知や、クリックされた座標に基づいてポップアップを表示したいときなど、業務で使う場面が意外と多くあります。
イベントオブジェクトを意識するかしないかで、実装できることが大きく変わってくるのです。

実務での活用シーン

実際の開発現場では、例えば以下のような使い方が考えられます。

  • コンテキストメニューのカスタマイズ：右クリック位置に独自メニューを表示する
  • 座標を使ったドラッグ&ドロップ：マウスダウン、マウスムーブ、マウスアップと組み合わせて要素を移動する
  • 複数ボタン管理：event.targetでどのボタンが押されたかを取得して処理を分岐する

こういった実装をする時に、イベントオブジェクトの理解があるとスムーズに開発できるでしょう。
初心者のうちは「クリック時にはこういう情報が取れるんだ」という感覚で覚えておくだけでも十分役立ちます。

クリックイベントとイベントバブリング

JavaScriptのイベントには「バブリング」という重要な仕組みがあります。
バブリングとは、イベントが最も内側の要素から外側の要素へ向かって伝わっていく動きのことです。
たとえば、HTMLのdivの中にボタンがあるとき、ボタンがクリックされたらボタン要素から親のdivへ、さらにその外側へ...というように段階的にイベントが伝わっていきます。

バブリングとキャプチャリング

一般的に「イベントの伝搬」と言うと、キャプチャリングとバブリングの2フェーズがあります。

  • キャプチャリング：外側から内側に向かってイベントが伝わる
  • バブリング：内側から外側に向かってイベントが伝わる

通常のaddEventListener("click", fn)ではバブリングフェーズでリスナーが呼ばれます。
キャプチャリングフェーズで呼びたい場合は、第3引数にtrueを指定します。
初心者のうちはバブリングの方を主に使うため、キャプチャリングは「外→内に伝わる仕組み」程度に把握しておけば問題ありません。

イベント伝搬を制御する

クリックイベントがバブリングするということは、ネストされた要素で複数のイベントを登録していると、意図せず連続でイベントが発火してしまうこともあるという意味でもあります。
例えば以下のようなHTMLを考えましょう。

<div id="outer">
  <button id="inner">クリック</button>
</div>

上記で#innerと#outerにそれぞれclickイベントを登録しておくと、ボタンをクリックした際に、#inner用の処理の後に#outer用の処理も実行されます。
もし、親要素のイベントは実行してほしくないという場面があるなら、コールバック内でevent.stopPropagation()を呼ぶことでバブリングを止めることができます。
これにより、子要素のイベントが処理された後に親のイベントが動くのを防げるわけですね。

実務での具体例

実務では、例えばモーダルウィンドウの外側をクリックするとモーダルを閉じたいが、内側をクリックした場合は閉じたくない、といったユーザーインターフェイスがしばしば登場します。
こういったケースでは「子要素でイベントを止める」パターンと、「親要素でイベントを判断する」パターンがあります。
バブリングの仕組みを理解していないと、クリックの制御が思った通りに動かず、バグが発生することもあるため注意が必要です。

複数の要素に対するクリックイベント

実務では、たとえば一覧表示されている商品リストの各ボタンにクリックイベントを設定する、といった場面がよくあります。
要素が少ないうちは個別にdocument.getElementByIdで取得してaddEventListenerをつければ事足ります。
しかし、要素が動的に増減する場合や、数十、数百といったスケールになる場合、個別にイベントをつけるのは管理が大変ですよね。

同時に処理したい場合の工夫

もし「同じクラスを持つ複数要素すべてに、ほぼ同じクリック処理をしたい」というケースがあるなら、document.querySelectorAll(".クラス名")を使ってまとめて要素を取得し、ループでaddEventListenerを設定する方法が考えられます。

const buttons = document.querySelectorAll(".item-button");
buttons.forEach((button) => {
  button.addEventListener("click", () => {
    // 共通の処理
    console.log("商品がクリックされました");
  });
});

このように書くと、クラスitem-buttonが付いたすべてのボタンがクリックされたときに、同じ処理が動きます。
管理が単純になるメリットがありますが、要素数が非常に多い場合は、個別にイベントをセットする分だけパフォーマンス負荷にも注意が必要です。

イベントデリゲーションの考え方

イベントがバブリングで外側に伝わっていく性質を利用して、最初から親要素のみにイベントリスナーを設定し、クリックされた要素をevent.targetで判定して処理を分岐する方法をイベントデリゲーションと言います。
たとえば商品リストを囲む<div id="item-container">のみにイベントリスナーをつけて、クリック時にevent.target.classListなどでクリックされた要素を特定して処理を振り分けます。

イベントデリゲーションを使う利点は、要素数が増えても親要素に紐づけたイベントがひとつだけなので、パフォーマンス的に有利であり、かつ動的に要素が追加・削除されてもコードの追加がほぼ不要という点です。
一方で、コードのロジックが親要素に集中しすぎると可読性が下がる可能性があるので、適切な粒度で管理を分割することが大切です。

実務で覚えておきたいTIPS

クリックイベント自体は単純に見えますが、いざ開発に入ると細かい注意点がいくつも出てきます。
ここでは実務で役立ちそうなポイントをいくつか挙げてみましょう。

デフォルトアクションを抑止する

リンクをクリックしたときにページが遷移してしまうなど、デフォルトの動きを防ぎたい場面があります。
そのときはイベントオブジェクトのpreventDefault()を活用すると、クリックによる遷移などを止められます。

<a href="https://example.com" id="link">外部サイトへ</a>

<script>
  const link = document.getElementById("link");
  link.addEventListener("click", (event) => {
    event.preventDefault();
    console.log("リンクの遷移をキャンセルしました");
  });
</script>

このように書くことで、リンクをクリックしても別ページへ飛ばずに、JavaScript側の処理だけが走るようになります。
たとえばフォーム送信ボタンを押したときに、一度エラーチェックをしてから送信処理を実行したいといったケースにも応用できます。

スマホでのタップイベントへの応用

スマートフォンやタブレットでは、「クリック」が「タップ」と呼ばれる操作に相当します。
基本的にはclickイベントでも動きますが、場合によっては「タッチイベント」を使うことで操作性が上がるケースもあります。
しかし、初心者の方はまずはclickを使って同様の処理がモバイル端末でも動くことを確認するとよいでしょう。

タッチイベントには独自のイベント（touchstart, touchmove, touchendなど）がありますが、クリックイベントだけでも多くのケースに対応できます。

ただし、モバイル特有の「300ms遅延」など古い仕様もあるので、もし操作感が気になる場合はライブラリの利用やタッチイベントを検討するとよいでしょう。
最初は深く考えすぎず、クリックイベントでユースケースを満たせるか試すのがおすすめです。

クリックイベントとパフォーマンス

クリックイベントはユーザーの操作が入るたびに発火するため、処理内容が重すぎるとUIがカクついたり、スムーズに反応しなかったりする恐れがあります。
特に複数の要素にイベントをつけすぎたり、イベントリスナー内で大きな処理を行うと、パフォーマンスに影響を及ぼしやすいです。

処理の分割と最適化

もしクリックイベントで複雑な計算やサーバー通信を行う必要があるなら、以下のような工夫が考えられます。

  • 処理をなるべく非同期化してユーザー体験を損なわない
  • Web Workerの利用を検討する（大規模処理の場合）
  • イベントデリゲーションを用いて大量要素へ個別にリスナーを付けるのを回避する
  • 条件分岐を明確化して、不要な処理を行わない

初歩的な開発ではあまり意識する機会がないかもしれませんが、実務ではクリックイベントのコールバックが肥大化してしまい、結果的にパフォーマンス低下を招くケースもあります。
コードレビューなどで早めに気づけるよう、余裕があればタスクを分割しつつイベント処理を実装しましょう。

クリックイベントにまつわるよくある疑問

ここでは、初心者の方が開発でよく抱く疑問をピックアップしてみました。
クリックイベントを実務で使うとき、ぜひ参考にしてみてください。

ボタンとリンクの使い分け

「押すと画面が切り替わる」という動作ならリンク（<a>）、「何かの機能を呼び出す」ならボタン（<button>）が基本ですが、見た目をカスタマイズすると境目がわかりにくくなることがあります。
ウェブ標準の観点では、ページ遷移や外部サイトへの誘導にはリンク、それ以外の操作ならボタンを使うのが推奨です。
この使い分けを守ることで、スクリーンリーダーなどを利用するユーザーにも正しい意味を伝えられます。

クリック範囲を広げるには？

ボタンやアイコンが小さいと、ユーザーがクリックしにくい場合があります。
HTML/CSS的なアプローチとしては、余白やパディングを増やす、あるいは親要素全体をクリック可能にする（display: block;を使い、<a>や<button>を包む）方法が考えられます。
純粋にクリックイベントをJavaScript側で対処するのではなく、UI全体の設計もあわせて検討しましょう。

ダブルクリックへの対応はどうする？

ユーザーが素早く二度押しするときには「ダブルクリック」が発生します。
実務では、ダブルクリックに特別な処理を割り当てるかどうかは状況次第ですが、dblclickイベントが用意されています。
ただし、シングルクリックと混在するとユーザー体験が複雑になりがちなので、基本はシングルクリックで用を足せるよう設計するケースが多い印象です。

ダブルクリックを使うと誤操作が増える恐れがあり、モバイル端末のユーザーにはわかりづらい場合もあるので注意しましょう。

まとめ

ここまで、JavaScriptのクリックイベントについて、基本から実務での応用例まで紹介しました。
クリックイベントは最初のステップとしては取り組みやすい半面、イベントバブリングの概念やパフォーマンスの問題を理解するまでに時間がかかる場合があります。
しかし、実際の開発では非常に頻繁に使う機能なので、仕組みをしっかり把握しておくと何かと便利です。

ボタン要素に対する単純なイベント設定から始め、イベントデリゲーションを応用して大規模な画面でも効率的に管理できるようになると、開発の幅がぐっと広がります。
また、イベントオブジェクトを使いこなせるようになると、クリックされた位置の取得や、クリック対象がどの要素なのかを絞り込むなど、より高度な制御ができるようになるでしょう。

以上で、クリックイベントの解説を終わります。
初心者の皆さんでも、まずはどのようにイベントリスナーを仕込むかを理解し、少しずつ実務的な細かいテクニックを身につけていってください。
ウェブページを操作するときの基本となるので、今後の学習でもぜひ積極的に触れてみてください。

JavaScriptをマスターしよう

この記事で学んだJavaScriptの知識をさらに伸ばしませんか？
Udemyには、現場ですぐ使えるスキルを身につけられる実践的な講座が揃っています。

JavaScriptの人気講座ランキングを見る筆者おすすめ No.1 講座！「ちゃんと学ぶ、HTML/CSS + JavaScript」
フロントエンド開発の新着記事をチェック

フロントエンドエンジニアとは？初心者にもわかりやすい徹底解説