JavaScriptで1回限りのイベントを作成する方法

多くのJavaScriptタスクには、1回だけ発射するイベントが必要です。 最初のクリックでビデオをロードするサムネイル、またはAJAXを介して追加のコンテンツを取得する「その他」ボタンを考えてください。 同じイベントハンドラーを繰り返しトリガーすることは非効率的であり、予期しない動作につながる可能性があります（たとえば、冗長データの読み込み）。 幸いなことに、JavaScriptで使い捨てイベントハンドラーを作成するのは簡単です。通常、プロセスには次のとおりです

1. ハンドラーの添付：イベントハンドラー（関数）がイベントに割り当てられます（クリックなど）。
ハンドラーの実行：
2. イベントが発生したときにハンドラーが実行されます。
ハンドラーの削除：
3. ハンドラーが分離され、後続のイベントでさらなる実行を妨げます。
jqueryの

method

を使用しています one() jqueryを使用している場合、最も単純なソリューションはメソッドです：

one()これは、他のjQueryイベント方法と同じように機能します。 詳細なドキュメントについては、jQuery API：

https：//www.php.cn/link/55e71b4408e917b9c7bb0df7d0b81af4

<code class="language-javascript">$("#myelement").one("click", function() {
  alert("This message appears only once!");
});</code>

セルフレモービングハンドラー（プレーンJavaScript）

プレーンjavaScriptでは、ハンドラー関数はそれ自体を削除できます：

ラインは、最初の呼び出し後にハンドラーを削除します。 これは、ハンドラーの名前やイベントタイプに関係なく機能します。

は厳密なモードではサポートされていないことに注意してください。 最新のJavaScriptでは、名前付き関数を使用して直接参照する場合があります。 古いIEバージョンの場合、

と "on"プレフィックス（例： "onclick"）が必要です。

<code class="language-javascript">document.getElementById("myelement").addEventListener("click", handler);

function handler(e) {
  e.target.removeEventListener(e.type, arguments.callee);
  alert("This message appears only once!");
}</code>

再利用可能な1回限りのイベント関数e.target.removeEventListener(e.type, arguments.callee);削除コードの書き込みを繰り返し回避するには、再利用可能な機能を作成します。 arguments.callee detachEvent使用法：

Modern JavaScriptの

オプション

<code class="language-javascript">function oneTimeEvent(node, type, callback) {
  node.addEventListener(type, function(e) {
    e.target.removeEventListener(e.type, arguments.callee);
    callback(e);
  });
}</code>

最も近代的で間違いなく最もクリーンなアプローチは、

：

：

<code class="language-javascript">oneTimeEvent(document.getElementById("myelement"), "click", function(e) {
  alert("This message appears only once!");
});</code>

のオプションを使用します。

これは、ほとんどの最新のブラウザでサポートされており、手動削除の必要性を回避します。 once必ずしも必要ではありませんが、シングル使用イベントハンドラーを作成するためのこれらのテクニックを理解することで、JavaScriptプロジェクトの貴重な柔軟性と効率を提供します。 プロジェクトの依存関係とコーディングスタイルに最適な方法を選択してください。

以上がJavaScriptで1回限りのイベントを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。