如何将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));
    });
}