【2026年7月最新】HTMLのonclick属性でクリック処理をする完全ガイド｜addEventListenerとの使い分けとClaude Code活用

この記事の内容

1. 01onclick属性の基本と書き方
2. 02関数を定義してonclickから呼び出す
3. 03thisでクリックした要素自身を参照する
4. 04複数の関数をonclickから実行する
5. 05addEventListenerとの使い分け
6. 06フォームのsubmitとpreventDefaultの組み合わせ
7. 07よくあるエラーとトラブルシューティング
8. 08Claude Codeでonclick処理を自動生成する
9. FAQよくある質問

📚 用語解説

onclick属性：HTMLタグに設定するイベントハンドラー属性。ユーザーがその要素をクリック（マウスボタンを押して離す）したときに、属性値として指定したJavaScriptコードを実行する。button・a・div・span・imgなどほぼすべてのHTML要素に設定できる。値として直接JavaScriptの式を書くか、事前に定義した関数名を書く。例: onclick="alert('Hello')" または onclick="myFunction()"。

クリック


挨拶


複数処理


クリックリンク



  このdivをクリックすると背景色が変わります

onclick属性の値は文字列ですが、JavaScriptとして実行されます。クォートには注意が必要です。onclick属性値自体をダブルクォート（"）で囲んでいる場合、JavaScriptの文字列はシングルクォート（''）を使います。逆に属性値をシングルクォートで囲む場合は内部にダブルクォートを使えます。

  
  



  
  メッセージ表示

  
  挨拶

  
  計算

  

📚 用語解説

thisキーワード（onclick文脈）：onclick属性の値（JavaScriptコード）の中でthisを使うと、その属性が設定されたHTML要素（クリックされた要素自身）を参照できる。例: onclick="this.style.color='red'"とすると、クリックした要素の文字色が赤になる。関数に渡す場合はonclick="changeStyle(this)"とthisを引数として渡す。なお、onclick属性から関数を呼び出した場合に関数内でthisを使うと異なるオブジェクトを指すことがあるため、this参照が必要な場合は引数として渡すのが確実。

  色を変える




  クリック



トグルボタン
トグルボタン2





  このカードを閉じる
  ×

  3つの処理を実行




  3関数を実行



送信

📚 用語解説

addEventListener：JavaScriptでHTML要素にイベントリスナーを登録するメソッド。element.addEventListener('click', 関数名)のように、第1引数にイベント名（'click'）、第2引数にコールバック関数を指定する。同一の要素に同じイベントで複数のリスナーを登録できる点がonclick属性と大きく異なる。onClick属性はHTML側からJSを呼ぶのに対し、addEventListenerはJavaScript側から要素を取得してリスナーを追加する（HTML側を変更しない）。

onclick属性


addEventListener




  
アイテム1
  
アイテム2

📚 用語解説

preventDefault()：イベントオブジェクトのメソッド。クリックイベントなどのデフォルト動作（aタグのページ遷移、formのsubmitなど）をキャンセルする。onclick属性内では event.preventDefault() のように使う。onclick属性のreturn false; も同様の効果があるが、addEventListenerと組み合わせる場合はpreventDefault()を使うのが正しい方法。フォームバリデーション（送信前にエラーチェック）や確認ダイアログの実装でよく使われる。

  名前: 


  メール: 


  送信








  確認してから移動

onclick属性でreturn false;を使うとevent.preventDefault()とevent.stopPropagation()の両方が実行されます。aタグのページ遷移やフォームsubmitをキャンセルしたいだけなら return false; または event.preventDefault(); のどちらでも動作しますが、addEventListenerと組み合わせる場合は必ずevent.preventDefault()を使ってください。return false; はaddEventListenerのコールバック内では効果がありません。

📚 用語解説

イベントバブリング：クリックイベントは発生した要素から親要素・祖先要素へと伝播（バブリング）していく。例えば、div内のbuttonをクリックすると、buttonのonclickが実行された後にdivのonclickも実行される。これが意図しない動作の原因になることがある。伝播を止めるにはevent.stopPropagation()を使う。

  




  クリック
  
  






確認



  
    ボタン（伝播を止める）
  

📚 用語解説

イベントオブジェクト（Event Object）：onclick属性やaddEventListenerのコールバック関数に自動的に渡される引数。click・mousemove・keydownなどのイベント情報を含む。onclick属性のJSコードではeventという名前で参照できる。主なプロパティ: event.target（クリックされた要素）、event.currentTarget（リスナーが設定された要素）、event.clientX/clientY（クリック位置の座標）、event.shiftKey（Shiftキーが押されているか）など。

onclickのイベントオブジェクトを使うと、クリックした位置の座標（clientX/clientY）やShiftキー・Ctrlキーが押されていたか（shiftKey/ctrlKey）も取得できます。

<div onclick="showClickInfo(event)" style="width:300px;height:150px;border:2px dashed #ccc;cursor:crosshair;display:flex;align-items:center;justify-content:center;">
  クリックしてみてください
</div>
<p id="info" style="font-family:monospace;"></p>

<script>
  function showClickInfo(event) {
    const info = document.getElementById('info');
    info.textContent =
      'X: ' + event.clientX + ', Y: ' + event.clientY +
      ' | Shift: ' + event.shiftKey +
      ' | Ctrl: ' + event.ctrlKey;
  }
</script>

Shiftキーを押しながらクリック（Shift+クリック）で挙動を変えたい場合などに使います。event引数はonclick属性のJSコードで自動的に参照できます。

📚 用語解説

イベント委譲（Event Delegation）：個々の子要素にonclickを設定するのではなく、親要素1つにaddEventListenerを設定し、event.targetで実際にクリックされた子要素を判定する設計パターン。動的にli要素が追加されるリストなど、要素が後から増える場合でもリスナーを再登録せずに対応できる。大量の要素に個別にonclickを設定するよりメモリ効率も良い。

NEXT STEP

この記事の内容を、あなたのビジネスで
実践してみませんか？