为何onfocus事件在input元素上生效、多选select的option元素上失效，而onclick事件可行？（Chrome环境）

嘿，这个问题问得很到位！我来给你捋清楚背后的原因，再给你可行的替代方案：

1. 为什么<input>的onfocus能正常工作？ #

<input>是HTML原生的可聚焦元素，当你点击它或者通过Tab键切换时，浏览器会把焦点直接分配给这个input元素，所以绑定在它身上的onfocus事件自然会被触发。

2. 为什么<option>的onfocus完全没反应？ #

对于<select multiple>组件来说，浏览器的焦点始终只落在外层的<select>元素上，永远不会传递给内部的<option>。哪怕你选中某个选项，或者用键盘上下箭头切换高亮选项，实际拥有焦点的还是整个select容器——这是浏览器的原生行为，也是HTML规范的设计逻辑。<option>本身并不是可聚焦元素，所以它身上的onfocus事件根本不会被触发。

3. 那onclick为什么能生效？ #

click是鼠标交互事件，和焦点归属无关。当你点击<option>时，这个点击事件会直接触发在option元素本身（之后也会冒泡到外层的select），所以绑定的onclick能正常执行。

既然没法直接给<option>绑定onfocus，我们可以换个思路，监听外层<select>的相关事件，再结合选中/高亮的选项来实现类似逻辑：

示例1：监听select的focus事件（聚焦时触发） #

<select multiple id="multiSelect">
  <option value="1">选项A</option>
  <option value="2">选项B</option>
  <option value="3">选项C</option>
</select>

<script>
const multiSelect = document.getElementById('multiSelect');

// 当select获得焦点时，获取当前选中的选项
multiSelect.addEventListener('focus', () => {
  const selectedOpts = Array.from(multiSelect.selectedOptions);
  if (selectedOpts.length > 0) {
    myFunction(selectedOpts[0]); // 把选中的选项传递给函数
  }
});

function myFunction(option) {
  console.log('触发函数啦！当前选中的是:', option.textContent);
}
</script>

示例2：监听change事件（选中项变化时触发） #

如果需要在用户切换选中选项时触发逻辑，可以用change事件：

multiSelect.addEventListener('change', (e) => {
  const currentOpt = e.target.selectedOptions[0];
  if (currentOpt) {
    myFunction(currentOpt);
  }
});

示例3：跟踪键盘切换的高亮选项 #

如果要监听用户用上下箭头切换的高亮选项（未点击选中，只是键盘导航），可以用keydown事件：

multiSelect.addEventListener('keydown', (e) => {
  // 只处理上下箭头按键
  if (['ArrowUp', 'ArrowDown'].includes(e.key)) {
    // 加个延迟，等浏览器更新selectedIndex
    setTimeout(() => {
      const highlightedOpt = multiSelect.options[multiSelect.selectedIndex];
      myFunction(highlightedOpt);
    }, 0);
  }
});

确实，HTML事件的元素适用性有时候比较零散，简单总结一下：

• 焦点事件（focus/blur）仅作用于原生可聚焦元素（如input、select、button）或设置了tabindex >=0的元素，<option>不在此列。
• 鼠标/键盘交互事件（click/keydown等）则可以作用于大多数可见DOM元素，包括<option>。

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