如何在没有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实现。

例如，快速googling提供了这个https://jsperf.com/pubsub-js-vs-jquery-events/12。