技术问询：如何用JavaScript为li元素添加事件处理器并输出选中衬衫名称

没问题，这有几个实用的方案来实现你要的功能，根据你的需求场景选就行：

首先先确认你的HTML结构是这样的：

<h3>Shirts</h3>
<ul id='list'>
  <li>Biker Jacket</li>
  <li>Mens Shirt</li>
</ul>

这种方法只给父元素<ul>绑定一次事件，利用事件冒泡的特性来处理所有子<li>的点击。优势非常明显：就算后续动态添加新的<li>元素，也不需要重新绑定事件，代码更高效、易维护。

代码实现：

// 获取父容器ul
const shirtList = document.getElementById('list');

// 给父容器绑定点击事件
shirtList.addEventListener('click', function(event) {
  // 确保点击的目标是li元素
  if (event.target.tagName === 'LI') {
    // 输出当前点击的衬衫名称
    console.log(event.target.textContent);
  }
});

如果你的列表是完全静态的（不会新增或删除<li>），也可以直接遍历每个<li>，给它们单独绑定点击事件：

// 获取所有衬衫项
const shirtItems = document.querySelectorAll('#list li');

// 逐个绑定点击事件
shirtItems.forEach(item => {
  item.addEventListener('click', function() {
    console.log(this.textContent);
  });
});

如果需要兼容一些不支持forEach的老式浏览器，用传统for循环也能搞定：

// 获取所有li元素
const shirtItems = document.getElementById('list').getElementsByTagName('li');

// 循环绑定事件
for (let i = 0; i < shirtItems.length; i++) {
  shirtItems[i].addEventListener('click', function() {
    console.log(this.textContent);
  });
}

简单总结下：优先选事件委托，它的扩展性和性能都是最好的；静态列表的话，用forEach遍历也很简洁。

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