如何为元素数组批量添加addEventListener？JS新手求简化方案

Hey there! Great question—this is such a common pain point when you’re starting out with JavaScript, and it’s awesome that you’re thinking about making your code scalable instead of repeating yourself.

Your current code works, but it’s not DRY (Don’t Repeat Yourself). If you add more buttons later, you’d have to keep writing new lines of the same code, which gets messy fast. Here’s how you can fix this:

Using a for Loop (Classic Approach) #

You can loop through each button in the btns array, and use the loop index to target the matching section from the sections array:

if (btns.length && sections.length > 0) {
  // Ensure we don't loop beyond the length of either array to avoid errors
  const maxItems = Math.min(btns.length, sections.length);
  for (let i = 0; i < maxItems; i++) {
    btns[i].addEventListener('click', function(event) {
      smoothScrollTo(sections[i], event);
    });
  }
}

Using forEach (Modern, Readable Approach) #

If you prefer cleaner, more concise code, the forEach method is perfect here. It lets you iterate over the buttons and access their index directly to match the section:

if (btns.length && sections.length > 0) {
  btns.forEach((btn, index) => {
    // Only add the listener if there's a corresponding section
    if (sections[index]) {
      btn.addEventListener('click', (event) => {
        smoothScrollTo(sections[index], event);
      });
    }
  });
}

Why This Works #

• Both methods automatically handle any number of buttons—no more copy-pasting lines as you add new ones.
• We added checks to avoid errors if btns and sections have different lengths (like if you have more buttons than sections, or vice versa).
• The forEach version uses arrow functions for brevity, but either approach will do the job perfectly for your needs.

Now your code will scale seamlessly as you add more buttons and sections! 😊

内容的提问来源于stack exchange，提问作者user4806423