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");

因为这会取消绑定我的所有滚动事件，而命名空间（＆＃34; scroll.ad1＆＃34;）本身并不存在。

我还没有找到关于这个话题的其他帖子。我听说有些人提到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实现。

快速Google搜索会以https://jsperf.com/pubsub-js-vs-jquery-events/12为例。

如何在没有jQuery的情况下模拟命名空间事件或取消绑定单个事件？

2 个答案: