选择什么事件将处理程序从 <select> 委派给选定的 <option>？

Question

当在 <select> 控件中选择另一个 <option> 时，可以使用 <select> 触发的处理程序以非常直接的方式处理此事件。但是由于某些原因，我的项目使用委派的 <option> 触发的处理程序会更方便。我尝试使用不同的事件来触发和委托所需的处理程序。结果不尽如人意：

onfocus、onchange 和 onkeyup 处理程序仅在 <select> 控件上触发，而不会在嵌套的 <option>.[=34 上触发=]
onclick 处理程序根据需要工作并被委派（在选定的 <option> 上触发）。但是，使用此处理程序显然没有任何意义，因为 select 控件中的另一个 option 也可以通过键盘选择，而不仅仅是通过鼠标选择。

我说得对吗？我是否错过了可以在案例中使用的任何标准 DOM 事件？或者我必须只使用一种 polyfill，比如 jQuery 的 focusin 和 focusout?

Answer 1

我不确定我是否完全理解您的需求，但我会尽力回答。

正如你所说的 jQuery，我有这个解决方案：

$("#my-select").change(function() {
    // $(this) refers to the select element
    $(this).find("option:selected").each(function() {
        // this function is called only once per change
        // $(this) refers to the selected option
    })
});

实例：

$("#my-select").change(function() {
  // $(this) refers to the select element
  $("#s_value").text($(this).val());
  $("#s_text").text($(this).find("option:selected").text());
  $(this).find("option:selected").each(function() {
    // this function is called only once per change
    // $(this) refers to the selected option
    $("#o_value").text($(this).val());
    $("#o_text").text($(this).text());
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="my-select">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
</select>
<br>SELECTED (FROM SELECT) :
<br>Value : <span id="s_value"></span>
<br>Text : <span id="s_text"></span>
<br>
<br>SELECTED (FROM OPTION) :
<br>Value : <span id="o_value"></span>
<br>Text : <span id="o_text"></span>
<br>
<br>

Answer 2

根据讨论，没有 DOM 个事件符合指定要求。

选择什么事件将处理程序从 <select> 委派给选定的 <option>？

What event(s) to choose to delegate a handler from <select> to the selected <option>?

javascript

handler

html-select

event-bubbling

event-capturing