我有一个框架,可以在广告滚动到视口(viewport)时延迟加载广告。当页面加载时,我检查哪些内容在 View 中并加载它们。如果它们不在 View 中,我会创建一个滚动事件并命名每个事件,以便我可以单独绑定(bind)和取消绑定(bind)它们:
if (adIsInView("ad1") == false) {
$(document).on("scroll.ad1", function() {
if (adIsInView("ad1") == true) {
displayAd("ad1");
$(document).off("scroll.ad1");
}
});
}
这样就可以很容易地设置scroll.ad1、scroll.ad2等,单独绑定(bind)和解除绑定(bind)它们。
这是我的代码中唯一依赖于 jQuery 的部分。我不想仅仅为了获得命名空间事件而加载 50 KB 文件。如何使用 addEventListener 和 removeEventListener 来执行此操作?显然我不能只使用
window.removeEventListener("scroll");
因为这会解除我所有滚动事件的绑定(bind),并且命名空间(“scroll.ad1”)本身并不存在。
我还没有找到关于这个确切主题的任何其他帖子。我听一些人提到 jQuery 源代码通过在对象中存储事件来创建命名空间,但我不太确定它是如何工作的。有什么想法吗?
最佳答案
您可以绑定(bind)和取消绑定(bind)特定的处理程序。
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");
}
关于javascript - 如何在没有 jQuery 的情况下模拟命名空间事件或解除单个事件的绑定(bind)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29178288/