javascript - 如何对每个单独的对象键值对使用 addEventListener？

Question

我有一个这样的 JavaScript 对象 -

var pages = {
    about: document.querySelector('#about'),
    meta: document.querySelector('#meta'),
    foresight: document.querySelector('#foresight')
}

querySelector 是我的导航栏中的一个 ID，下面的代码中列出了 HREF id(它在页面上链接到的位置)-

我正在尝试添加一个事件监听器，它会触发一个 smoothscroll 方法以转到我页面的某些区域，我让它像这样工作 -

pages.about.addEventListener('click', function(event){
    event.preventDefault();
    smoothScroll(document.querySelector('#page1'));
});

pages.meta.addEventListener('click', function(event){
    event.preventDefault();
    smoothScroll(document.querySelector('#page2'));
});

pages.foresight.addEventListener('click', function(event){
    event.preventDefault();
    smoothScroll(document.querySelector('#page3'));
});

我知道这不是最有效的写法，并且尝试了一个对象 forEach 方法，在键上使用 If 条件来平滑滚动到相应的页面，但它似乎无法正常工作。谁能告诉我写这篇文章的最佳实践方式？

谢谢

Answer 1

您可以将页面 ID 信息组合到您的数据结构中，并使用循环来重用代码:

const pages = [
    { button: "about",     page: "page1" },
    { button: "meta",      page: "page2" },
    { button: "foresight", page: "page3" } 
];

for (const { button, page } of pages) {
    document.getElementById(button).addEventListener('click', function(event){
        event.preventDefault();
        smoothScroll(document.getElementById(page));
    });
}