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

我有一个像这样的JavaScript对象-

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

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'));
});

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

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

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

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'));
});

我知道这不是写这篇文章的最有效的方法，并且已经尝试了一个objectforeach方法，在键上使用If条件来平滑滚动到相应的页面，但是它似乎不起作用。有人能告诉我写这篇文章的最佳实践方式吗

---

谢谢

您可以将页面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));
    });
}

---

您可以在数据结构中组合页面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));
    });
}

---

以下是通过元素属性执行此操作的方法：

var menuItems=document.getElementsByClassName（'menu-item'）；
对于（var i=0；i，这里有一种通过元素属性实现的方法：


var menuItems=document.getElementsByClassName（'menu-item'）；
对于（var i=0；iI开始认为一个对象数组比1好，谢谢！这看起来很好很干净！：DI开始认为一个对象数组比1好，谢谢！这看起来很好很干净！：D