如何在不使用jQuery的情況下模擬命名空間事件或取消綁定單個事件？

Question

我有一個框架，可以在廣告滾動到視口時延遲加載廣告。 加載頁面時，我檢查查看視圖中的內容並將其加載。 如果看不到它們，則創建一個滾動事件，並為每個事件命名空間，以便可以分別綁定和取消綁定它們：

if (adIsInView("ad1") == false) { 
    $(document).on("scroll.ad1", function() {
        if (adIsInView("ad1") == true) {
            displayAd("ad1");
            $(document).off("scroll.ad1");
        } 
    });
}

這樣，很容易設置scroll.ad1，scroll.ad2等，分別進行綁定和取消綁定。

這是我的代碼中唯一依賴jQuery的部分。 我不想加載一個50 KB的文件，只是為了擁有命名空間事件。 如何使用addEventListener和removeEventListener做到這一點？ 顯然我不能只使用

window.removeEventListener("scroll");

因為這將取消綁定所有我的滾動事件，並且名稱空間（“ scroll.ad1”）本機不存在。

我還沒有找到關於這個確切主題的其他文章。 我聽說有人提到jQuery源代碼通過將事件存儲在對象中來創建命名空間，但是我不確定這是如何工作的。 有任何想法嗎？

Answer 1

您可以綁定和取消綁定特定的處理程序。

if (adIsInView("ad1") == false) {
    var ad1_listener = function() {
        if (adIsInView("ad1") == true) {
            displayAd("ad1");
            window.removeEventListener("scroll", ad1_listener);
        } 
    }
    window.addEventListener("scroll", ad1_listener);
}

您可以進一步執行以下操作：

function register_ad(ad) {
    function listener() {
        if (adIsInView(ad) === true) {
            displayAd(ad);
            window.removeEventListener("scroll", listener);
        } 
    }
    window.addEventListener("scroll", listener);
}

if (adIsInView("ad1") === false) {
    register_ad("ad1");
}

Answer 2

您正在尋找具有名稱空間支持的PubSub JavaScript實現。

例如，快速谷歌搜索提供了https://jsperf.com/pubsub-js-vs-jquery-events/12 。