システム開発

2024.05.28

JavaScript onclick イベントの基礎

Webページを作成する際に「ボタンをクリックしたら、別のページに移動したい」「画像をクリックしたら、拡大表示したい」「フォームの送信ボタンを押したら、入力内容をチェックしたい」と思うことはありませんか？

これらの動きは、すべてJavaScriptのonclickイベントを使って実現できます。

本記事では、サンプルコードを使いながらJavaScriptのonclickイベントについて解説します。

この記事でわかること

onclickイベントとは？

JavaScript の onclick イベントは、HTML 要素がクリックされた時に処理を実行するためのイベントハンドラーです。

ボタンクリックでメッセージを表示したり、画像を切り替えたりなど様々なインタラクティブな動きをウェブページに実装することができます。

onclickイベントを使って、さまざまな動作を実現できます。

HTML 要素の onclick 属性に直接 JavaScript コードを記述することで、クリック時に処理を実行できます。

HTML
<button onclick=”alert(‘ボタンがクリックされました’)”>クリック</button>

上記コードでは、button 要素がクリックされた時に、alert ウィンドウで “ボタンがクリックされました” というメッセージが表示されます。

onclick イベントは、JavaScript コードで要素のプロパティとして設定することもできます。

HTML
<button id=”myButton”>クリック</button>

上記コードでは、getElementById 関数を使って button 要素を取得し、onclick プロパティに匿名関数を設定しています。クリック時に、匿名関数が実行されて “ボタンがクリックされました” というメッセージが表示されます。

onclick イベントが発生すると、イベントオブジェクトが生成されます。

イベントオブジェクトには、クリック時の座標やボタンの種類などの情報が含まれています。

JavaScript
const button = document.getElementById(“myButton”); button.onclick = function() { alert(“ボタンがクリックされました”); };

上記コードでは、event オブジェクトを受け取り、クリック座標とクリックされたボタンの種類を表示しています。

addEventListener メソッドを使って、onclick イベントリスナーを追加・削除できます。

HTML
<button onclick=”showClickInfo(event)”>クリック情報</button>

上記コードでは、addEventListener メソッドを使って click イベントリスナーを追加し、removeEventListener メソッドを使って削除しています。

onclick イベントは、ウェブページにインタラクティブな動きを追加するための基本的なイベントハンドラーです。今回紹介した方法を参考に、様々なイベント処理を実装してみてください。

デジタルトレンドナビ編集部

システム開発、Webサイト制作、ECサイトの構築・運用、デジタルトランスフォーメーション（DX）など、デジタルビジネスに関わる多岐の領域において、最新のトレンド情報や実践的なノウハウを発信してまいります。

View all posts