JavaScript onclick イベントの基礎
目次
onclickイベントとは？
JavaScript の onclick イベントは、HTML 要素がクリックされた時に処理を実行するためのイベントハンドラーです。
ボタンクリックでメッセージを表示したり、画像を切り替えたりなど様々なインタラクティブな動きをウェブページに実装することができます。
onclickイベントでできること
onclickイベントを使って、さまざまな動作を実現できます。
- 別のページに移動する
- 画像を拡大表示する
- フォームの内容をチェックする
- アニメーションを再生する
- 音声を再生する
onclick イベントの使い方
HTML 属性で設定する方法
HTML 要素の onclick 属性に直接 JavaScript コードを記述することで、クリック時に処理を実行できます。
| HTML |
|---|
| <button onclick="alert('ボタンがクリックされました')">クリック</button> |
上記コードでは、button 要素がクリックされた時に、alert ウィンドウで "ボタンがクリックされました" というメッセージが表示されます。
ポイント
- コードはダブルクォーテーション（""）で囲みます。
- 複数行のコードを記述する場合は、セミコロン（;）で区切ります。
JavaScript コードで設定する方法
onclick イベントは、JavaScript コードで要素のプロパティとして設定することもできます。
| HTML |
|---|
| <button id="myButton">クリック</button> |
上記コードでは、getElementById 関数を使って button 要素を取得し、onclick プロパティに匿名関数を設定しています。クリック時に、匿名関数が実行されて "ボタンがクリックされました" というメッセージが表示されます。
ポイント
- 要素を取得するにはgetElementByIdを使用します。
- 匿名関数は、function キーワードを使って定義できます。
イベントオブジェクトの使い方
onclick イベントが発生すると、イベントオブジェクトが生成されます。
イベントオブジェクトには、クリック時の座標やボタンの種類などの情報が含まれています。
| JavaScript |
|---|
| const button = document.getElementById("myButton"); button.onclick = function() { alert("ボタンがクリックされました"); }; |
上記コードでは、event オブジェクトを受け取り、クリック座標とクリックされたボタンの種類を表示しています。
イベントリスナーの追加・削除
addEventListener メソッドを使って、onclick イベントリスナーを追加・削除できます。
| HTML |
|---|
| <button onclick="showClickInfo(event)">クリック情報</button> |
上記コードでは、addEventListener メソッドを使って click イベントリスナーを追加し、removeEventListener メソッドを使って削除しています。
ポイント
- イベントリスナーは、要素ごとに複数設定できます。
- イベントリスナーは、不要になったら削除しましょう。
まとめ
onclick イベントは、ウェブページにインタラクティブな動きを追加するための基本的なイベントハンドラーです。今回紹介した方法を参考に、様々なイベント処理を実装してみてください。