如何循环批量为多个DOM元素绑定blur事件并存储内容到localStorage

你不需要逐个声明变量、逐个绑定事件，直接批量选中符合规则的元素循环处理即可，代码如下：

// 筛选所有需要处理的可编辑表头元素
const editableTh = document.querySelectorAll('th[contenteditable="true"][id^="a"]')

// 遍历绑定事件
editableTh.forEach(element => {
  element.addEventListener('blur', function() {
    localStorage.setItem(this.id, this.innerHTML)
  })
})

代码说明 #

• querySelectorAll 可以通过CSS选择规则批量匹配页面元素，这里用的两个属性筛选规则：
  • [contenteditable="true"] 只选中可编辑的元素
  • [id^="a"] 只选中id以字符a开头的元素，刚好匹配你a0001、a0002的命名规则
• 遍历过程中element（或者回调里的this）就是你提到的占位符***，每次循环会自动指向当前处理的元素，直接读取它的id属性作为localStorage的存储key即可，不需要手动替换
• 推荐用addEventListener绑定事件，不要直接给.blur赋值，避免覆盖其他同类型事件绑定

优化建议 #

如果后续还会新增其他需要相同逻辑的元素，可以给这类元素统一加一个自定义类名，比如class="auto-save-edit"，选择器就可以简化为document.querySelectorAll('.auto-save-edit')，后续新增元素只要加上这个类名就会自动适配存储逻辑，不需要修改JS代码。

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