JavaScript　初回クリック時のみ処理を実行する方法：addEventListenerのonceオプション

JavaScriptで初回クリック時のみ処理を実行する方法を解説します。

初回クリック時のみ処理を実行する方法を教えてください！

addEventListenerのonceオプションを使えば、初回クリック時のみ処理を実行することができます。

addEventListenerメソッドのonceオプションとは

初回クリック時の処理を実行する方法には、様々な方法がありますが、ここではaddEventListenerメソッドのonceオプションを使用した方法について解説します。

addEventListenerメソッドは、指定したイベントが発生したときに呼び出される関数（イベントリスナー）を登録するためのメソッドです。addEventListenerメソッドには、以下のような構文があります。

target.addEventListener(type, listener[, options]);

capture：ブラウザがイベントの伝搬をキャプチャするかどうかを指定する。
once：イベントリスナーが1回だけ呼び出されるかどうかを指定する。
passive：イベントリスナーがpreventDefault()を呼び出さないことを示す。

onceオプションは、イベントリスナーが1回だけ呼び出されるように指定するオプションです。つまり、初回クリック時のみ処理を実行することができます。以下は、addEventListenerメソッドのonceオプションを使用した初回クリック時の処理実行の例です。

const button = document.querySelector('button');

button.addEventListener('click', () => {
  console.log('初回クリック時のみ実行される処理');
}, { once: true });

この例では、button要素にクリックイベントリスナーを登録しています。{ once: true }をoptions引数として渡すことで、初回クリック時のみ処理が実行されます。2回目以降のクリックでは、処理は実行されません。

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

以下は、addEventListenerメソッドのonceオプションを使用した初回クリック時の処理実行の例です。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>初回クリック時のみ処理を実行する方法</title>
</head>
<body>
  <button>クリックしてください</button>

  <script>
    const button = document.querySelector('button');

    button.addEventListener('click', () => {
      console.log('初回クリック時のみ実行される処理');
    }, { once: true });
  </script>
</body>
</html>

上記の例を実行すると、ボタンをクリックした際にコンソールに「初回クリック時のみ実行される処理」というテキストが表示されます。その後、何度クリックしても処理は実行されません。

このように、addEventListenerメソッドのonceオプションを使用することで、初回クリック時のみ処理を実行することができます。

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

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

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