如何遍历<li>元素并为每个添加点击事件处理器以简化代码

推荐方案：事件委托 #

这种方法只需要给父元素<ul>绑定一个事件监听器，利用事件冒泡处理所有子项的点击，代码最简洁，还能兼容后续动态新增的列表项：

const input = document.getElementById('input');
const moodsList = document.getElementById('moods');

moodsList.addEventListener('click', (e) => {
  // 确认点击的是列表项
  if (e.target.tagName === 'LI') {
    input.value = e.target.textContent;
  }
});

备选方案：循环绑定事件 #

如果更习惯直接操作每个列表项，可以用querySelectorAll获取所有情绪项，再循环添加事件：

const input = document.getElementById('input');
const moodItems = document.querySelectorAll('#moods li');

moodItems.forEach(item => {
  item.addEventListener('click', function() {
    input.value = this.textContent;
  });
});

原代码的问题点 #

• 逐个声明变量、绑定事件的方式冗余度极高，维护起来很麻烦
• 原代码里upbeat被重复绑定了两次相同的点击事件，属于无效代码，建议删除其中一份

HTML结构不需要做任何修改，保持你现有的即可。

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