如何为createElement创建的div添加点击事件实现子div单选高亮

你可以通过以下两种方式实现需求，第二种事件委托方案更适合子元素会动态增删的场景：

方案1：创建子元素时直接绑定事件 #

在创建每个子div的同时绑定点击事件，点击时先重置所有子元素样式，再设置当前选中元素样式：

var parentDiv = document.querySelector('.parent-div')
// 统一定义样式值，后续修改更方便
const DEFAULT_COLOR = '#fff' // 未选中的默认颜色
const ACTIVE_COLOR = '#2385bb' // 选中后的高亮颜色

// 示例：批量创建5个子div，你可以按你的实际需求调整创建逻辑
for (let i = 0; i < 5; i++) {
  const newDiv = document.createElement('div');
  // 给子div加统一类名，方便批量选择
  newDiv.classList.add('child-item');
  // 绑定点击事件
  newDiv.addEventListener('click', function() {
    // 1. 重置所有子div的颜色
    const allChildren = parentDiv.querySelectorAll('.child-item');
    allChildren.forEach(item => item.style.backgroundColor = DEFAULT_COLOR);
    // 2. 设置当前点击的div为选中色
    this.style.backgroundColor = ACTIVE_COLOR;
  })
  parentDiv.appendChild(newDiv);
}

方案2：事件委托（更推荐） #

不需要给每个子元素单独绑定事件，只需要给父元素绑定一次事件即可，性能更好，也适配后续动态新增的子元素：

var parentDiv = document.querySelector('.parent-div')
const DEFAULT_COLOR = '#fff'
const ACTIVE_COLOR = '#2385bb'

// 父元素绑定点击事件，利用事件冒泡机制处理所有子元素的点击
parentDiv.addEventListener('click', function(e) {
  // 校验点击的目标是子div
  if (e.target.classList.contains('child-item')) {
    // 重置所有子div颜色
    const allChildren = parentDiv.querySelectorAll('.child-item');
    allChildren.forEach(item => item.style.backgroundColor = DEFAULT_COLOR);
    // 设置当前点击元素为选中色
    e.target.style.backgroundColor = ACTIVE_COLOR;
  }
})

// 后续创建子元素不需要再绑定事件，直接创建即可
for (let i = 0; i < 5; i++) {
  const newDiv = document.createElement('div');
  newDiv.classList.add('child-item');
  parentDiv.appendChild(newDiv);
}

优化建议 #

你也可以用CSS类控制样式，避免直接操作行内样式，维护性更高：

/* 定义默认和选中样式 */
.child-item {
  background-color: #fff;
}
.child-item.active {
  background-color: #2385bb;
}

对应JS逻辑修改为操作类名即可：

// 重置样式
allChildren.forEach(item => item.classList.remove('active'));
// 给当前元素加选中样式
e.target.classList.add('active');

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