是否可以为HTML <option>元素添加EventListener事件监听器？

问题本质原因 #

你尝试的事件绑定写法本身没有错误，问题源于原生<select>控件的底层渲染特性：
绝大多数桌面端浏览器的<select>下拉选项列表由操作系统原生UI组件渲染，不属于页面HTML DOM渲染层，所有指向<option>的鼠标、指针类事件都会被操作系统直接拦截，不会传递到DOM层触发回调，因此即便HTMLOptionElement继承了HTMLElement的所有属性方法，事件绑定也无法生效。

可行实现方案 #

方案1：自定义模拟下拉组件（推荐） #

放弃原生<select>，使用普通DOM元素模拟下拉选择器的交互逻辑，模拟的选项元素完全在DOM渲染层内，可正常绑定各类事件，示例代码如下：

<template>
  <!-- 下拉触发器 -->
  <div class="select-trigger" @click="showOption = !showOption">
    {{ currentLabel || '请选择' }}
  </div>
  <!-- 下拉选项容器 -->
  <div class="option-list" v-show="showOption">
    <div
      v-for="(option, index) in selectionSet"
      :key="index"
      class="option-item"
      :class="{ 'is-disabled': option.disabled }"
      @mouseover="testValue = true"
      @mouseleave="testValue = false"
      @click="!option.disabled && selectOption(option)"
    >
      {{ option.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showOption: false,
      currentLabel: '',
      testValue: false,
      selectionSet: [
        // 你的选项数据
      ]
    }
  },
  methods: {
    selectOption(option) {
      this.currentLabel = option.name
      this.showOption = false
      // 其他选中后逻辑
    }
  }
}
</script>

也可直接使用前端组件库提供的下拉选择组件，这类组件均为DOM模拟实现，支持自定义选项事件绑定。

方案2：原生<select>兼容方案 #

如果必须使用原生<select>，仅能通过<select>本身的事件实现有限逻辑，无法监听单个<option>的 hover 等事件：

<select 
  @change="handleChange"
  @mouseover="testValue = true"
  @mouseleave="testValue = false"
  ref="select"
>
  <option 
    v-for="(option, index) in selectionSet" 
    :key="index"
    :value="option.id" 
    :disabled="option.disabled"
  >
    {{ option.name }}
  </option>
</select>

handleChange() {
  const selectedId = this.$refs.select.value
  // 处理选中逻辑
}

内容的提问来源于stack exchange，提问作者D.Schaller