JavaScriptのonclickイベントでクリックされた要素を取得する12の方法

●JavaScriptとonclickイベントとは？
- ○イベントハンドラの基礎
- ○DOM要素の概要
●クリックされた要素の取得方法12選
●クリックイベントを活用する具体例
●よくあるエラーとその対処法
- ○未定義のthisやevent.targetの問題
- ○イベントバブリングとイベントキャプチャリング
●JavaScript onclickの応用例
まとめ

●JavaScriptとonclickイベントとは？

JavaScriptは、ウェブページにインタラクティブ性を与えるための強力な言語です。

その中でも、onclickイベントは最も頻繁に使用されるイベントハンドラの1つです。

onclickは、ユーザーがHTML要素をクリックした時に発生するイベントを捉え、それに応じてJavaScriptのコードを実行することができます。

○イベントハンドラの基礎

イベントハンドラは、特定のイベントが発生した時に呼び出される関数のことを指します。

JavaScriptでは、addEventListenerメソッドを使用してイベントハンドラを登録することができます。

このメソッドは、イベントの種類とそれに対応する関数を引数として取ります。

○DOM要素の概要

DOMとは、Document Object Modelの略で、HTMLやXMLなどの文書をプログラムから操作するためのインターフェースです。

JavaScriptでは、DOMを使用してHTMLの要素を取得し、その属性や内容を変更することができます。

onclickイベントを使用する際には、クリックされた要素を特定するためにDOMの知識が必要不可欠です。

●クリックされた要素の取得方法12選

それでは、JavaScriptでクリックされた要素を取得する12の方法を見ていきましょう。

これらの方法を使い分けることで、より効率的かつ柔軟にイベント処理を行うことができます。

○サンプルコード1：thisキーワードを使用する

thisキーワードは、イベントハンドラ内で使用すると、イベントが発生した要素自体を参照することができます。

ここでは、クリックされたボタンの背景色を変更する例を紹介します。

<button onclick="changeColor(this)">クリックしてください</button>

<script>
function changeColor(element) {
  element.style.backgroundColor = "red";
}
</script>

このコードでは、ボタンがクリックされると、changeColor関数が呼び出され、引数としてクリックされたボタン要素自体（this）が渡されます。

関数内でelement.style.backgroundColorを設定することで、ボタンの背景色が赤に変更されます。

○サンプルコード2：event.targetを使用する

event.targetは、イベントが発生した要素を取得するためのプロパティです。

ここでは、クリックされたリンクのURLをアラートで表示する例を紹介します。

<a href="https://example.com" onclick="showURL(event)">リンク</a>

<script>
function showURL(event) {
  alert(event.target.href);
  event.preventDefault();
}
</script>

このコードでは、リンクがクリックされると、showURL関数が呼び出され、イベントオブジェクトが引数として渡されます。

event.target.hrefを使用して、クリックされたリンクのURLを取得し、アラートで表示します。

event.preventDefault()を呼び出すことで、リンクのデフォルトの動作（ページ遷移）をキャンセルしています。

○サンプルコード3：関数にパラメータとして要素を渡す

HTML要素のonclick属性に、直接JavaScriptの関数を呼び出す際に、パラメータとして要素自体を渡すことができます。

ここでは、クリックされた要素のidを表示する例をみていきましょう。

<div id="element1" onclick="showId(this)">要素1</div>
<div id="element2" onclick="showId(this)">要素2</div>

<script>
function showId(element) {
  alert(element.id);
}
</script>

このコードでは、各divがクリックされると、showId関数が呼び出され、クリックされた要素自体がパラメータとして渡されます。

関数内でelement.idを使用して、クリックされた要素のidを取得し、アラートで表示します。

●クリックイベントを活用する具体例

これまでは、JavaScriptでクリックされた要素を取得する方法について解説してきました。

では、実際のウェブサイトやアプリケーションでは、クリックイベントをどのように活用しているのでしょうか？

ここでは、具体的な例を交えながら、クリックイベントの実践的な使い方を探っていきましょう。

○サンプルコード5：フォーム送信ボタン

ウェブサイトでよく見かけるのが、フォームの送信ボタンです。

ユーザーがボタンをクリックすると、フォームのデータが処理されます。

ここでは、クリックイベントを使ってフォーム送信を制御する例をみてみましょう。

<form id="myForm">
  <input type="text" name="name" required>
  <button type="button" onclick="submitForm()">送信</button>
</form>

<script>
function submitForm() {
  const form = document.getElementById("myForm");
  if (form.checkValidity()) {
    form.submit();
  } else {
    alert("フォームに入力エラーがあります");
  }
}
</script>

このコードでは、送信ボタンのtype属性を”button”に設定し、onclickイベントでsubmitForm関数を呼び出しています。

関数内では、フォームの入力内容をチェックし、問題がなければform.submit()でフォームを送信します。

入力エラーがある場合は、アラートでユーザーに通知します。

実行結果

入力が正しい場合 -> フォームが送信される
入力エラーがある場合 -> アラートが表示され、フォームは送信されない

このように、クリックイベントを使ってフォームの送信を制御することで、ユーザーに適切なフィードバックを与え、データの整合性を保つことができます。

○サンプルコード6：画像スライダーの制御

ウェブサイトで画像スライダーを使う場面も多いですよね。

クリックイベントを使えば、ボタンで画像の切り替えを制御できます。

<div>
  <img id="slider" src="image1.jpg">
  <button onclick="prevImage()">前へ</button>
  <button onclick="nextImage()">次へ</button>
</div>

<script>
const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
let currentIndex = 0;

function prevImage() {
  currentIndex--;
  if (currentIndex < 0) {
    currentIndex = images.length - 1;
  }
  document.getElementById("slider").src = images[currentIndex];
}

function nextImage() {
  currentIndex++;
  if (currentIndex >= images.length) {
    currentIndex = 0;
  }
  document.getElementById("slider").src = images[currentIndex];
}
</script>

このコードでは、”前へ”と”次へ”のボタンにそれぞれprevImage関数とnextImage関数を割り当てています。

この関数は、currentIndex変数を更新し、適切な画像を表示します。

配列の範囲を超える場合は、先頭または末尾の画像に戻るように調整しています。

実行結果

“前へ”ボタンをクリック -> 前の画像が表示される
“次へ”ボタンをクリック -> 次の画像が表示される

このサンプルコードを応用すれば、よりインタラクティブな画像ギャラリーやカルーセルを作成することができるでしょう。

クリックイベントの活用により、ユーザーに直感的な操作性を提供できます。

○サンプルコード7：動的なコンテンツの管理

クリックイベントは、動的なコンテンツの表示・非表示を切り替えるのにも便利です。

ここでは、クリックされたボタンに応じてコンテンツを表示する例を紹介します。

<button onclick="showContent('content1')">コンテンツ1</button>
<button onclick="showContent('content2')">コンテンツ2</button>
<button onclick="showContent('content3')">コンテンツ3</button>

<div id="content1" style="display: none;">
  <h2>コンテンツ1</h2>
  <p>これはコンテンツ1です。</p>
</div>
<div id="content2" style="display: none;">
  <h2>コンテンツ2</h2>
  <p>これはコンテンツ2です。</p>
</div>
<div id="content3" style="display: none;">
  <h2>コンテンツ3</h2>
  <p>これはコンテンツ3です。</p>
</div>

<script>
function showContent(contentId) {
  const contentElements = document.getElementsByTagName("div");
  for (let i = 0; i < contentElements.length; i++) {
    contentElements[i].style.display = "none";
  }
  document.getElementById(contentId).style.display = "block";
}
</script>

このコードでは、各ボタンのonclickイベントにshowContent関数を割り当て、引数としてコンテンツのIDを渡しています。

showContent関数は、まず全てのdiv要素を非表示にし、その後指定されたIDの要素のみを表示します。

実行結果

“コンテンツ1″ボタンをクリック -> コンテンツ1が表示され、他のコンテンツは非表示になる
“コンテンツ2″ボタンをクリック -> コンテンツ2が表示され、他のコンテンツは非表示になる
“コンテンツ3″ボタンをクリック -> コンテンツ3が表示され、他のコンテンツは非表示になる

このテクニックを使えば、同じページ内で複数のコンテンツを管理し、ユーザーの操作に応じて動的に表示を切り替えることができます。

クリックイベントの柔軟性を活かして、より洗練されたユーザーインターフェースを実現しましょう。

○サンプルコード8：カスタムデータ属性を使った処理

HTML5では、カスタムデータ属性を使ってHTML要素に独自のデータを埋め込むことができます。

これを利用すると、クリックイベントの処理をより柔軟に行えます。

<button data-action="save">保存</button>
<button data-action="load">読み込み</button>
<button data-action="delete">削除</button>

<script>
function handleClick(event) {
  const action = event.target.dataset.action;
  switch (action) {
    case "save":
      console.log("保存処理");
      break;
    case "load":
      console.log("読み込み処理");
      break;
    case "delete":
      console.log("削除処理");
      break;
    default:
      console.log("不明なアクション");
  }
}

const buttons = document.getElementsByTagName("button");
for (let i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener("click", handleClick);
}
</script>

このコードでは、各ボタンにdata-action属性を設定し、それぞれのアクションを指定しています。

JavaScriptでは、すべてのボタンに対してクリックイベントのリスナーを追加し、handleClick関数を呼び出します。

handleClick関数内では、event.target.dataset.actionを使ってクリックされたボタンのアクションを取得し、それに応じて適切な処理を行います。

実行結果

“保存”ボタンをクリック -> コンソールに”保存処理”と表示される
“読み込み”ボタンをクリック -> コンソールに”読み込み処理”と表示される
“削除”ボタンをクリック -> コンソールに”削除処理”と表示される

カスタムデータ属性を活用することで、HTML要素に関連するデータをマークアップ内に直接埋め込むことができます。

これにより、JavaScriptのコードをシンプルに保ち、要素の役割を明確にすることができるのです。

●よくあるエラーとその対処法

クリックイベントを扱う際に、初心者がよく遭遇するエラーがいくつかあります。

ここでは、それらのエラーとその対処法について見ていきましょう。

○未定義のthisやevent.targetの問題

クリックイベントのハンドラ内でthisやevent.targetを使用する際、それらが期待通りに機能しないことがあります。

<button id="myButton">クリック</button>

<script>
const button = document.getElementById("myButton");
button.addEventListener("click", function() {
  console.log(this.id);  // エラー: thisはwindowオブジェクトを参照する
});
</script>

このコードでは、アロー関数を使用しているため、this
がボタン要素を参照せず、代わりにグローバルなwindowオブジェクトを参照しています。

この問題を解決するには、通常の関数を使用するか、イベントリスナーの第3引数でthisの値を指定します。

button.addEventListener("click", function() {
  console.log(this.id);  // "myButton"
}.bind(button));

○イベントバブリングとイベントキャプチャリング

イベントバブリングとイベントキャプチャリングは、イベントが伝播する方向を表します。

バブリングは最も内側の要素から外側に向かって伝播し、キャプチャリングは逆に外側から内側に向かって伝播します。

<div id="parent" onclick="console.log('親要素がクリックされました')">
  <button id="child" onclick="console.log('子要素がクリックされました')">クリック</button>
</div>

このコードでは、ボタンをクリックすると、子要素と親要素の両方のクリックイベントが発生します。

これは、イベントがボタンから親のdivまでバブリングするためです。

バブリングを止めるには、イベントオブジェクトのstopPropagation()メソッドを使用します。

const child = document.getElementById("child");
child.addEventListener("click", function(event) {
  console.log("子要素がクリックされました");
  event.stopPropagation();
});

●JavaScript onclickの応用例

さて、ここまでJavaScriptのonclickイベントについて、基礎から具体的な使用例まで幅広く学んできました。

皆さんは、もうこの技術を使いこなせる自信がついてきたのではないでしょうか？でも、本当の実力が問われるのはこれからです。

実際のウェブサイトやアプリケーションでは、もっと複雑で高度なインタラクションが求められることが多いのです。

そこで、ここからはonclickイベントのさらなる応用例を見ていきましょう。

プロのエンジニアたちが実践しているテクニックを学ぶことで、あなたのスキルを次のレベルに引き上げることができるはずです。

一緒に、JavaScriptの可能性を探求していきましょう！

○サンプルコード9：Eコマースサイトでの使用例

Eコマースサイトでは、ユーザーがクリックした商品をカートに追加する機能が欠かせません。

ここでは、onclickイベントを使ってこの機能を実装する例を紹介します。

<div class="product" data-id="1" data-name="商品1" data-price="1000" onclick="addToCart(this)">
  <img src="product1.jpg" alt="商品1">
  <h3>商品1</h3>
  <p>価格: 1,000円</p>
</div>

<script>
let cart = [];

function addToCart(product) {
  const id = product.dataset.id;
  const name = product.dataset.name;
  const price = Number(product.dataset.price);

  cart.push({id, name, price});
  console.log("カートに追加:", cart);
}
</script>

このコードでは、商品情報をカスタムデータ属性として商品のdiv要素に埋め込んでいます。

addToCart関数は、クリックされた商品のデータを取得し、カートの配列に追加します。

実行結果

商品をクリックすると、その商品がカートに追加され、コンソールにカートの内容が表示される

このサンプルを応用すれば、カートの表示やチェックアウト機能など、Eコマースサイトに必要な様々な機能を実装できるでしょう。

クリックイベントを巧みに活用することで、ユーザーに快適で直感的なショッピング体験を提供できます。

○サンプルコード10：ソーシャルメディアのインタラクティブ要素

ソーシャルメディアのウェブサイトでは、「いいね」やコメントなどのインタラクティブ要素が重要な役割を果たしています。

ここでは、onclickイベントを使ってこれらの機能を実装する例を紹介します。

<div class="post">
  <p>ここは投稿の内容です。</p>
  <button onclick="likePost(this)">いいね <span class="likes-count">0</span></button>
  <button onclick="showComments(this)">コメント <span class="comments-count">0</span></button>
  <div class="comments" style="display: none;">
    <input type="text" placeholder="コメントを入力...">
    <button onclick="addComment(this)">送信</button>
  </div>
</div>

<script>
function likePost(button) {
  const likesCount = button.querySelector(".likes-count");
  likesCount.textContent = Number(likesCount.textContent) + 1;
}

function showComments(button) {
  const comments = button.nextElementSibling;
  comments.style.display = (comments.style.display === "none") ? "block" : "none";
}

function addComment(button) {
  const input = button.previousElementSibling;
  const comment = input.value.trim();
  if (comment) {
    const commentsCount = button.parentElement.previousElementSibling.querySelector(".comments-count");
    commentsCount.textContent = Number(commentsCount.textContent) + 1;
    input.value = "";
    console.log("新しいコメント:", comment);
  }
}
</script>

このコードでは、「いいね」ボタンをクリックすると、いいね数が増加します。

「コメント」ボタンをクリックすると、コメント入力欄が表示/非表示になります。

コメントを送信すると、コメント数が増加し、入力欄がクリアされます。

実行結果

「いいね」ボタンをクリックすると、いいね数が1増加する
「コメント」ボタンをクリックすると、コメント入力欄が表示/非表示になる
コメントを送信すると、コメント数が1増加し、入力欄がクリアされる

このサンプルを応用すれば、ソーシャルメディアサイトに欠かせない様々なインタラクション機能を実装できます。

ユーザー同士のつながりを促進し、エンゲージメントを高めるためには、クリックイベントを効果的に活用することが重要なのです。

○サンプルコード11：アニメーション効果のトリガー

ウェブサイトにアニメーション効果を取り入れることで、ユーザーの注意を引き付け、印象に残るデザインを実現できます。

ここでは、onclickイベントを使ってアニメーションをトリガーする例をみてみましょう。

<button onclick="startAnimation()">アニメーションを開始</button>
<div id="animationTarget" style="width: 100px; height: 100px; background-color: red;"></div>

<script>
function startAnimation() {
  const target = document.getElementById("animationTarget");
  target.style.transition = "transform 1s";
  target.style.transform = "rotate(360deg)";
}
</script>

このコードでは、ボタンをクリックすると、startAnimation関数が呼び出されます。

この関数は、アニメーションの対象要素（赤い正方形のdiv）を選択し、transition
とtransformのスタイルを設定することで、360度の回転アニメーションを開始します。

実行結果