プログラミング

【PR】を含みます。

【JavaScript】イベントハンドラの登録方法

JavaScriptイベントハンドラの登録方法

フロントエンドの業務でよく使用するJavaScriptのイベントハンドラとイベントハンドラの登録方法についてまとめました。

イベントハンドラとは？

イベントハンドラは、ユーザーがウェブページで行うアクション（クリック、キーボード入力、マウス移動など）に対して特定のコードを実行するための仕組みです。

イベントハンドラを設定することで、インタラクティブなウェブページを作成することができます。

よく使用されるイベントハンドラ一覧

blur
フォーカスが外れたとき
click
要素がクリックされたとき
change
内容が変更されたとき
drag
要素がドラッグされたとき
focus
フォーカスが当たったとき
keydown
キーボードのキーが押されたとき
keyup
キーボードのキーが離されたとき
load
ページやリソースが読み込まれたとき
mousemove
マウスを動かしているとき
mouseout
マウスが要素から離れたとき
mouseover
マウスが要素の上に乗ったとき
resize
ウィンドウサイズが変更されたとき
submit
フォームが送信されたとき
scroll
ページや要素がスクロールされたとき
select
テキストなどが選択されたとき

基本的なイベントハンドラの登録方法

基本的なイベントハンドラの登録方法を3つ紹介します。

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

1. HTMLの属性を使う方法

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. JavaScript内で設定する方法

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属性に直接書かれたイベントハンドラ）が上書きされることを避けることができます。

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

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>

動的に生成された要素に対してもイベントハンドラを設定できる

動的に生成された要素にイベントハンドラを設定する場合、要素生成後にイベントハンドラを設定する必要があります。

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>

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など、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-プログラミング
-