不能对 option 做事件委托，因为 option 是替换元素，不支持事件监听且不冒泡；应监听 select 的 change 事件，它在用户完成选择（鼠标或键盘操作）后触发，可一次性获取全部选中项。
多选下拉菜单（<select multiple>）本身不触发“选项点击”事件委托，因为 <option> 元素**无法直接绑定事件，也不冒泡**。所以不能像处理按钮列表那样对 <option> 做事件委托。正确做法是监听 select 元素的 change 事件 —— 它在用户修改选中项（包括 Ctrl/Cmd+单击、Shift+单击、拖选等）后触发，且天然支持多选场景。
为什么不能对 option 做事件委托？
<option> 是替换元素（replaced element），浏览器控制其渲染与交互。它不接受事件监听，click、mousedown 等事件既不会在其上触发，也不会向上冒泡到 select。尝试给 option 绑定事件或设置 onclick 属性均无效。
用 change 事件监听选中状态变化
change 是最可靠、语义最准确的选择。它在用户完成选择操作（松开鼠标/键盘）后触发，且能一次性获取全部当前选中项：
- 监听
select元素的change事件，而非option - 在事件处理器中遍历
event.target.selectedOptions（返回HTMLCollection） - 或读取
event.target.options并检查每个.selected属性
示例：
立即学习“Java免费学习笔记（深入）”；
<select id="fruit" multiple size="4"><option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
const select = document.getElementById('fruit');
select.addEventListener('change', (e) => {
const selected = Array.from(e.target.selectedOptions).map(opt => opt.value);
console.log('当前选中：', selected); // 如 ['apple', 'orange']
});
如需模拟“点击某一项”的即时反馈？
虽然无法捕获精确的某次 option 点击，但可通过 mousedown + change 组合近似实现：
- 在
select上监听mousedown，记录被按下的option（通过e.target判断是否为option，但注意：实际 e.target 可能是 select 自身，因 option 不捕获事件） - 更稳妥方式：监听
select的mousedown，结合getBoundingClientRect()和鼠标坐标，手动计算哪一项被点中（较复杂，一般不推荐） - 真正需要粒度控制时，建议放弃原生
select[multiple]，改用自定义多选组件（如 checkbox 列表 + 标签式选中区），此时可自由委托事件到每个选项
补充：键盘操作也受 change 事件覆盖
用户用空格、方向键、Ctrl+A 等键盘方式切换多选项时，change 同样会触发，无需额外监听 keydown。这是原生 select 的优势 —— 一次监听，覆盖所有交互途径。
