如何在JavaScript中創建一次性事件

許多JavaScript任務需要僅觸發一次的事件。 想一想在第一次點擊時加載視頻的縮略圖，或通過Ajax獲取其他內容的“更多”按鈕。 反复觸發同一事件處理程序效率低下，可能導致意外行為（例如，冗餘數據加載）。 幸運的是，在JavaScript中創建一次性事件處理程序很簡單。該過程通常涉及：

1. >附加處理程序：>將事件處理程序（函數）分配給事件（例如單擊）。
2. 處理程序執行：事件發生時，處理程序運行。
然後將處理程序拆卸
3. 處理程序，然後將處理程序分離，以防止在隨後的事件中進一步執行。

使用jQuery的方法one()

如果您使用的是jQuery，最簡單的解決方案是one()>方法：

>

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

>就像其他jQuery事件方法一樣。 有關詳細的文檔，請參見jQuery API：https://www.php.cn/link/55e71b444408e917b917bbb0bbbb0df7d0b81af4。

>自我驅動的處理程序（plain javaScript）>

在普通的JavaScript中，任何處理程序功能都可以刪除自身：>

>在第一次調用後，將其刪除處理程序。 無論處理程序的姓名或事件類型如何，都可以使用。請注意，在嚴格的模式下不支持

<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>

； 在現代JavaScript中，您可以使用命名函數並直接引用它。 對於較舊的IE版本，您需要

和“ on”前綴（例如，“ onclick”）。 e.target.removeEventListener(e.type, arguments.callee);> arguments.calleedetachEvent>可重複使用的一次性事件函數

避免反复編寫刪除代碼，創建一個可重複使用的函數：>

>用法：

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

>現代JavaScript的

選項

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

最現代，最清潔的方法在once>中使用選項：

>

once: true這是大多數現代瀏覽器支持的，避免了手動刪除的需求。 addEventListener>並非總是必要的，但是了解創建一次性事件處理程序的這些技術為您的JavaScript項目提供了寶貴的靈活性和效率。 選擇最適合您項目依賴性和編碼樣式的方法。

>

以上是如何在JavaScript中創建一次性事件的詳細內容。更多資訊請關注PHP中文網其他相關文章！