forEach函数自动打印所有元素而非仅点击元素的问题排查

问题出在事件绑定的方式上：你调用addEventListener时直接执行了loadEdit(post)，这会导致forEach循环遍历每个按钮时立刻触发loadEdit函数，所以页面刷新后就打印了所有元素，而非点击时才执行。

修复方案 #

方案1：用匿名函数包裹调用 #

修改绑定逻辑，通过匿名函数延迟loadEdit的执行，只有点击时才会触发：

document.addEventListener('DOMContentLoaded', () => {
  let posts = document.querySelectorAll('.update-btn');
  posts.forEach(post => post.addEventListener('click', () => loadEdit(post)))
  document.querySelector('#post_submit').addEventListener('click', newPost);
})

方案2：让loadEdit返回事件处理函数 #

调整loadEdit结构，使其返回一个函数作为点击事件的处理程序，同时可通过事件对象获取点击元素：

function loadEdit() {
  return function(event) {
    console.log("Clicked post: ", event.target);
  }
}

// 绑定事件时直接传入loadEdit（不要加括号调用）
document.addEventListener('DOMContentLoaded', () => {
  let posts = document.querySelectorAll('.update-btn');
  posts.forEach(post => post.addEventListener('click', loadEdit()))
  document.querySelector('#post_submit').addEventListener('click', newPost);
})

方案3：直接在事件处理中使用this #

事件触发时this会指向被点击的元素，无需额外传递参数：

document.addEventListener('DOMContentLoaded', () => {
  let posts = document.querySelectorAll('.update-btn');
  posts.forEach(post => post.addEventListener('click', function() {
    console.log("Clicked post: ", this);
  }))
  document.querySelector('#post_submit').addEventListener('click', newPost);
})

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