JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptでイベントを追加する最良の方法とは？addEventListener()の使い方を徹底解説

任意の要素にイベントを追加する最良の方法は、addEventListener()メソッドを使用することです。このメソッドは、指定した要素に対してイベントリスナー（イベント発生時に実行される処理）を登録します。従来のonclick属性と異なり、1つの要素に複数のイベントハンドラを追加できるため、現代のWeb開発では標準的な手法とされています。

addEventListener()メソッドの基本構文

element.addEventListener(event, function, useCapture);
  • event： 監視したいイベントの種類（例： 「click」「mouseover」「keydown」など）
  • function： イベント発生時に実行される関数
  • useCapture： 省略可能な引数。イベントのキャプチャリングの有無を真偽値で指定します（デフォルトはfalse）

コード例

以下は、JavaScriptでボタンのクリックイベントを追加し、テキストのフォントサイズを変更するサンプルコードです。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .result {
        font-size: 20px;
        font-weight: 500;
        color: rebeccapurple;
    }
</style>
</head>
<body>
<h1>JavaScriptでのイベント追加</h1>
<div style="color: green;" class="result">Hello world</div>
<button class="Btn">CLICK HERE</button>
<h3>上のボタンをクリックすると、テキストのフォントサイズが大きくなります</h3>
<script>
    let resEle = document.querySelector(".result");
    document.querySelector(".Btn").addEventListener("click", () => {
        resEle.style.fontSize = "34px";
    });
</script>
</body>
</html>

コードの解説

  • document.querySelector(".result")： 「result」クラスを持つdiv要素を取得します
  • querySelector(".Btn").addEventListener("click", ...)： ボタン要素に対してクリックイベントリスナーを登録します
  • ボタンがクリックされるとアロー関数内の処理が実行され、resEle.style.fontSizeが「34px」に変更されてテキストが拡大表示されます

出力結果

上記のコードを実行すると、次のような画面が表示されます。

JavaScriptでイベントを追加する最良の方法とは？addEventListener()の使い方を徹底解説

「CLICK HERE」ボタンをクリックすると、テキストのフォントサイズが34pxに拡大されます。

JavaScriptでイベントを追加する最良の方法とは？addEventListener()の使い方を徹底解説


  1. JavaScriptのErrorクラスは拡張できる？カスタムエラーを作成する最適な方法

    JavaScriptでは、組み込みのErrorクラスを継承することで、独自のカスタムエラーを作成できます。最も推奨される方法は、ES2015（ES6）以降のclass構文とextendsキーワードを使って、標準のErrorクラスを拡張した新しいカスタムエラークラスを定義することです。カスタムエラーを利用すれば、エラーの種類を名前で判別したり、エラーコードなどの独自のプロパティを持たせたりできるため、アプリケーションの規模が大きくなっても、柔軟で分かりやすいエラーハンドリングを実現できます。カスタムエラーの実装例以下は、JavaScriptでErrorクラスを拡張するサンプルコードです。<

  2. JavaScriptで新しいブラウザウィンドウを開く最良の方法とは？window.open()の使い方を解説

    JavaScriptで新しいブラウザウィンドウを開くには、windowオブジェクトのopen()メソッドを使うのが最も標準的で確実な方法です。 window.open()メソッドは、指定したURLを新しいウィンドウ（またはタブ）で開きます。第2引数でウィンドウ名、第3引数でサイズや位置などの表示特性を指定することも可能です。 window.open()の基本構文 window.open(URL, name, features); URL： 開きたいページのアドレス（必須） name： ウィンドウの名前またはターゲット属性（例： _blank）（省略可） features： ウィンドウの幅・高