プログラミング

【PR】を含みます。

【JavaScript】クリックイベントを基礎から解説

JavaScript クリックイベントを基礎から解説

フロントエンドの業務でよく使用するJavaScriptのクリックイベントについてまとめました。

クリックイベントとは？

クリックイベントは、ユーザーがマウスボタンをクリックした際に発生するイベントです。

HTML要素に対してクリックイベントを登録することで、ユーザーの操作に応じた動的な動作を実現できます。

基本的なクリックイベントの設定方法

基本的なクリックイベントの設定方法を3つ紹介します。

使用頻度は3つ目に解説しているaddEventListenerメソッドを使用することが多いです。

1. HTMLのonclick属性を使う方法

同じ要素に対して新しいonclickイベントハンドラが設定された場合、onclick属性のイベントハンドラは上書きされます。

HTML
Copy
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>【JavaScript】クリックイベント</title>
  7. </head>
  8. <body>
  9.     <button onclick="alert('ボタンがクリックされました！')">クリック</button>
  10. </body>
  11. </html>

2. イベントハンドラプロパティのonclickで登録する方法

同じ要素に対して新しいonclickイベントハンドラが設定された場合、既存のonclickイベントハンドラは上書きされます。

HTML
Copy
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>【JavaScript】クリックイベント</title>
  7. </head>
  8. <body>
  9.     <button id="myButton">クリック</button>
  11.     <script>
  12.       document.getElementById('myButton').onclick = function() {
  13.         alert('ボタンがクリックされました！');
  14.       };
  15.     </script>
  16. </body>
  17. </html>

3. addEventListenerメソッドを使う方法

HTML
Copy
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>【JavaScript】クリックイベント</title>
  7. </head>
  8. <body>
  9.     <button id="myButton">クリック</button>
  11.     <script>
  12.       document.getElementById('myButton').addEventListener('click', function() {
  13.         alert('ボタンがクリックされました！');
  14.       });
  15.     </script>
  16. </body>
  17. </html>

addEventListenerメソッドを使うメリット

複数のクリックイベントを追加できる

addEventListenerを使用すると、同じ要素に複数のクリックイベントを追加できます。

HTML
Copy
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>【JavaScript】クリックイベント</title>
  7. </head>
  8. <body>
  9.     <button id="myButton">クリック</button>
  11.     <script>
  12.       document.getElementById('myButton').addEventListener('click', function() {
  13.         alert('クリックイベント1');
  14.       });
  16.       document.getElementById('myButton').addEventListener('click', function() {
  17.         alert('クリックイベント2');
  18.       });
  19.     </script>
  20. </body>
  21. </html>

インラインイベントハンドラの上書きを避けることができる

addEventListenerを使用すると、既存のインラインクリックイベントが上書きされることを避けることができます。

これにより、他のスクリプトやライブラリと干渉せずにイベントを追加できます。

HTML
Copy
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>【JavaScript】クリックイベント</title>
  7. </head>
  8. <body>
  9.     <button id="myButton" onclick="alert('インラインクリックイベント')">クリック</button>
  11.     <script>
  12.       document.getElementById('myButton').addEventListener('click', function() {
  13.         alert('追加のクリックイベント');
  14.       });
  15.     </script>
  16. </body>
  17. </html>

クリックイベントを動的に削除することができる

addEventListenerを使用すると、クリックイベントを削除するためのremoveEventListenerメソッドを使用できます。

これにより、特定の条件下でクリックイベントを動的に削除できます。

HTML
Copy
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>【JavaScript】クリックイベント</title>
  7. </head>
  8. <body>
  9.     <button id="myButton">クリック</button>
  11.     <script>
  12.       const button = document.getElementById('myButton');
  14.       function handleClick() {
  15.         alert('ボタンがクリックされました！');
  16.       }
  18.       button.addEventListener('click', handleClick);
  20.       // 条件に応じてクリックイベントを削除
  21.       // ここでは例としてすぐにクリックイベントを削除しています
  22.       button.removeEventListener('click', handleClick);
  23.     </script>
  24. </body>
  25. </html>

動的に生成された要素に対してクリックイベントを登録できる

動的に生成された要素にイベントハンドラプロパティのonclickでクリックイベントを登録する場合、要素生成後にクリックイベントを登録する必要があります。

addEventListenerを使用することで、後から動的に生成された要素に対してクリックイベントを登録することができます。

HTML
Copy
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>【JavaScript】クリックイベント</title>
  7. </head>
  8. <body>
  9.     <script>
  10.       document.addEventListener('click', function(event) {
  11.         if (event.target.matches('#myButton')) {
  12.           alert('ボタンがクリックされました！');
  13.         }
  14.       });
  16.       // 新しいボタン要素を作成
  17.       let button = document.createElement('button');
  19.       // ボタンに id 属性とテキストを設定
  20.       button.id = 'myButton';
  21.       button.textContent = 'クリック';
  23.       // ボタンを body の先頭に追加
  24.       document.body.insertBefore(button, document.body.firstChild);
  25.     </script>
  26. </body>
  27. </html>

モダンなイベントハンドリング

addEventListenerは、HTML5以降の標準的なイベントハンドリング方法で、多くのモダンブラウザでサポートされています。

これにより、より一貫性のあるコードを書きやすくなります。

Data on support for the addeventlistener feature across the major browsers from caniuse.com

同じクラスを持つ要素にクリックイベントを登録する方法

JavaScriptのquerySelectorAllメソッドで要素を取得し、forEachループを使って各要素にクリックイベントを追加することができます。

HTML
Copy
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>【JavaScript】クリックイベント</title>
  7. </head>
  8. <body>
  9.     <button class="clickable">クリック 1</button>
  10.     <button class="clickable">クリック 2</button>
  11.     <button class="clickable">クリック 3</button>
  13.     <script>
  14.         // .clickableクラスを持つ全ての要素を取得
  15.         const elements = document.querySelectorAll('.clickable');
  17.         // 各要素にクリックイベントを追加
  18.         elements.forEach(function(element) {
  19.             element.addEventListener('click', function() {
  20.                 alert(`${element.textContent} がクリックされました！`);
  21.             });
  22.         });
  23.     </script>
  24. </body>
  25. </html>

既存のクリックイベントを削除して新しいクリックイベントを登録する方法

JavaScriptのremoveEventListenerメソッドでクリックイベントを削除後、addEventListenerで新しいクリックイベントを登録することができます。

HTML
Copy
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>【JavaScript】クリックイベント</title>
  7. </head>
  8. <body>
  9.     <button id="myButton">クリック</button>
  11.     <script>
  12.       const button = document.getElementById('myButton');
  14.       function handleClick() {
  15.         alert('既存のクリックイベント');
  16.       }
  18.       // クリックイベントを追加
  19.       button.addEventListener('click', handleClick);
  21.       // 既存のクリックイベントを削除
  22.       button.removeEventListener('click', handleClick);
  24.       function handleClick2() {
  25.         alert('新しいクリックイベント');
  26.       }
  28.       // 新しいクリックイベントを設定
  29.       button.addEventListener('click', handleClick2);
  30.     </script>
  31. </body>
  32. </html>

udemyでJavaScriptを学ぶ

講座名
【2023年最新】【JavaScript＆CSS】ガチで学びたい人のためのWEB開発実践入門（フロントエンド編） icon
学習時間
24.5時間
学習内容
  • 本格的なWEBサイトを作成する方法について学びます。
  • Sass（※以下CSSと記載）、JavaScriptの基礎について深く学びます。
  • CSS、JavaScriptの実践的な記述について深く学びます。
  • CSS、JavaScriptアニメーションの実装について学びます。
  • 最新の実践的なWEB画面の作成方法について深く学びます。
  • CSS、JavaScriptのコードの最適化、安定化について学びます。
  • 維持管理、持続可能なコードの記述方法について学びます。
対象受講者
  • ドットインストールでCSS、JavaScriptの入門編を終えたレベルの方
  • 他の先生のフロントエンドの入門編を終えたレベルの方
  • 自分で本格的なWEBサイトを作ってみたい方
  • CSS、JavaScriptの実践的な基礎を効率的に学びたい方
  • CSS、JavaScriptを今後仕事で使う予定の方
  • CSS、JavaScriptのコードの整理方法について学びたい方
  • CSS、JavaScriptのアニメーションを学びたい方
  • CSS、JavaScriptのレベルアップしたいWeb開発初級者の方
  • CSS、JavaScriptでどのようにすればレベルアップできるのか悩んでいる方
アイコン画像

もみじ

HTML・CSS・JavaScripの基礎的なことを理解しており、Webのフロントエンジニアを目指している方にオススメの講座です。

講座内容は実践で使用するものが多く、実務でも役立つ内容でした。

講座名
【JS】ガチで学びたい人のためのJavaScriptメカニズム icon
学習時間
20.5時間
学習内容
  • JavaScriptの動作原理について深く学びます。
  • JavaScriptがどのように実行されるのかについて深く学びます。
  • ES6+の最新のJavaScriptの記法について幅広く学びます。
  • 変数や参照の仕組みについて深く学びます。
  • オブジェクトのメカニズムについて深く学びます。
  • 関数のメカニズムについて深く学びます。
  • スコープの仕組みについて深く学びます。
  • プロトタイプのメカニズムについて深く学びます。
  • 反復処理のメカニズムについて深く学びます。
  • ジェネレーターやイテレーターについて深く学びます。
  • コールバック関数について深く学びます。
  • 非同期処理のメカニズムについて深く学びます。
  • モジュールの仕組みについて深く学びます。
  • クロージャーの仕組みについて深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • レキシカルスコープの仕組みについて深く学びます。
  • アロー関数の特徴について深く学びます。
  • thisの仕組みについて深く学びます。
  • bind、apply、callの動作原理について深く学びます。
  • クラスと継承の仕組みについて深く学びます。
  • ReflectやProxyなどの強力なオブジェクトへの理解を深めます。
  • Map，Setなどの強力なコレクションについて実践を交えて学びます。
  • よく使用される強力な実装パターンを演習を交えて学びます。
  • 独自のフレームワークを構築していく中でJavaScriptのメカニズムについて理解を深めます。
対象受講者
  • JavaScriptをコアの動作原理からキチンと理解したい方。
  • 自分の思った通りコードが動かずに悩んでいる方。
  • 自分の思った通りに動かず、気付いたら解決するのに１日経ってしまっていた経験のある方。
  • React, Vue, Angularが使いこなせず悩んでいる方。
  • JavaScriptの不可解な動きが理解できず、苦しんでいる方。
  • 少し複雑なコードを書こうとすると、ぐちゃぐちゃになって整理しきれず、悩んでいる方。
  • JavaScriptを本気で勉強したいと思っている方。
  • JavaScriptの変態仕様に苦しんでいる方。
  • JavaScriptが苦手なプログラマーの方。
アイコン画像

もみじ

JavaScripの基礎的なことを理解しており、より深くJavaScriptについて理解したいという方にオススメの講座です。

初心者の方が一度の受講で全てを吸収するのは難しいですが、繰り返し受講することでフロントエンドの業務で役立つ知識を身に付けることができます。

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-プログラミング
-