將多個 EventListener 設置為元素但刪除單個元素

Question

我有一個元素，在這個例子中 - $(window)。 我想在這個元素上放置幾個相同的 EventListener，這里“滾動”兩次。 這兩個 EventListener 各自執行不同的功能，我不能/不想相互連接，這里以簡化的方式顯示。 如何刪除單個 EventListener？

這是我做的一個小例子。

 // Logs 1 when scrolling $(window).on("scroll", () => { console.log(1); }); // Logs 2 when scrolling $(window).bind("scroll", () => { console.log(2); }); // After 2 seconds stop logging 1 setTimeout(() => { $(window).unbind("scroll"); // remove only logging 1 }, 2000);

 #test { height:10000px; width:100vw; background:blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="test"></div>

Answer 1

您可以為此使用event.namespace並為滾動事件添加多個命名空間，例如：

$(window).on("scroll.event1", () => {
    console.log(1);
});

$(window).on("scroll.event2", () => {
    console.log(2);
});

當您想刪除事件 1 時，您可以簡單地調用.off ，如下所示：

setTimeout(() => {
  $(window).off("scroll.event1"); // remove only logging 1
}, 2000);

演示：

 $(window).on("scroll.event1", () => { console.log(1); }); $(window).on("scroll.event2", () => { console.log(2); }); // After 2 seconds stop logging 1 setTimeout(() => { $(window).off("scroll.event1"); // remove only logging 1 }, 2000);

 #test { height: 10000px; width: 100vw; background: blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="test"></div>

Answer 2

您可以將.namespace添加到您的活動中。 這仍然會觸發相同的scroll事件，但允許您使用.off （或原始代碼中的.unbind ）引用它。

這是您更新的代碼：

 // Logs 1 when scrolling $(window).on("scroll.temp", () => { console.log(1); }); // Logs 2 when scrolling $(window).on("scroll", () => { console.log(2); }); // After 2 seconds stop logging 1 setTimeout(() => { $(window).off("scroll.temp"); // remove only logging 1 }, 2000);

 #test { height: 10000px; width: 100vw; background: blue; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="test"></div>

---

更多信息來自： https://api.jquery.com/on/

事件名稱和命名空間

任何事件名稱都可用於 events 參數。 jQuery 將通過瀏覽器的標准 JavaScript 事件類型，當瀏覽器由於用戶操作（例如點擊）產生事件時調用處理程序 function。