JavaScript　未存在の要素にイベントリスナーを登録する方法

JavaScriptで未存在の要素にイベントリスナーを登録する方法について解説します。

未存在の要素にイベントリスナーを登録する方法を知りたいです。どのようにすればよいでしょうか？

既存の要素に対しては簡単にイベントリスナーを登録できますが、未存在の要素に対してはそのままでは登録できません。その場合は以下のような方法があります。

受講者数No.1！初心者からプロへ導く信頼のスクール

短期間で習得可能！未経験から実践力を磨く充実のプログラム

テックアカデミー 公式ページへ ≫

今なら無料相談でAmazonギフトカードがもらえる！

未存在の要素にイベントリスナーを登録する方法

1. documentオブジェクトを使って要素を作成する

未存在の要素に対してイベントリスナーを登録する場合は、まずdocumentオブジェクトを使って要素を作成します。たとえば、以下のようにbutton要素を作成できます。

const button = document.createElement("button");

2. 要素にイベントリスナーを登録する

作成した要素に対してイベントリスナーを登録します。例えば、クリックイベントを登録する場合は、以下のようにaddEventListenerメソッドを使用します。

button.addEventListener("click", function() {
  // クリックされたときに実行する処理
});

3. 作成した要素をDOMに追加する

作成した要素をDOMに追加します。例えば、body要素に追加する場合は、以下のようにappendChildメソッドを使用します。

document.body.appendChild(button);

これで、作成した要素に対してイベントリスナーを登録して、未存在の要素に対してイベント処理を行うことができます。

サンプルプログラムを使った解説

以下に未存在の要素にイベントリスナーを登録するサンプルプログラムを示します。

const button = document.createElement("button");
button.innerHTML = "Click me";

button.addEventListener("click", function() {
  alert("Hello, world!");
});

document.body.appendChild(button);

　この例では、ボタン要素を作成し、クリックされたときにアラートを表示するイベントリスナーを登録し、作成したボタン要素をDOMに追加しています。

以上が未存在の要素にイベントリスナーを登録する方法です。注意点としては、イベントリスナーを登録する前に要素を作成し、DOMに追加することが必要であることです。

その他の未存在の要素に対してイベントリスナーを登録する方法

未存在の要素に対してイベントリスナーを登録する方法には、上記で紹介した方法以外にも、以下のような方法があります。

既存の要素に対してイベントリスナーを登録し、イベントバブリングを利用する

既存の親要素にイベントリスナーを登録し、イベントバブリングを利用して、クリックされた子要素を取得する方法です。例えば、以下のようにclickイベントに対して親要素にイベントリスナーを登録します。

const parent = document.querySelector("#parent");
parent.addEventListener("click", function(event) {
  const target = event.target;
  if (target.tagName === "BUTTON") {
    // ボタンがクリックされた場合の処理
  }
});

MutationObserverを使って要素の変化を監視する

MutationObserverを使って、DOMの変化を監視し、要素が追加されたときにイベントリスナーを登録する方法です。例えば、以下のようにMutationObserverを使用して、body要素の変化を監視し、button要素が追加されたときにクリックイベントを登録することができます。

const observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    if (mutation.addedNodes) {
      mutation.addedNodes.forEach(function(node) {
        if (node.tagName === "BUTTON") {
          node.addEventListener("click", function() {
            // ボタンがクリックされた場合の処理
          });
        }
      });
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true });

これらの方法を使用することで、未存在の要素に対してイベントリスナーを登録することができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

未存在の要素にイベントリスナーを登録する方法について解説しました。

documentオブジェクトを使って要素を作成することで未存在の要素に対してイベントリスナーを登録できるのですね。

未存在の要素に対してイベントリスナーを登録する場合は、documentオブジェクトを使って要素を作成し、作成した要素に対してイベントリスナーを登録してから、DOMに追加するようにしましょう。