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

【问题标题】：What event(s) to choose to delegate a handler from <select> to the selected <option>?选择什么事件将处理程序从 <select> 委托给选定的 <option>？
【发布时间】：2015-10-11 17:02:09
【问题描述】：

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

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

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

【问题讨论】：

选择框的实现在浏览器中非常不同，它们通常甚至不响应正常的 DOM 事件，而是浏览器内部“暮光区”的一部分。
顺便说一句，我现在用的是火狐。

标签： javascript handler html-select event-bubbling event-capturing

【解决方案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>

【讨论】：

很好的尝试，@Apolo，谢谢。不幸的是，我不想在这种情况下使用 jQuery。让我以不同的方式解释我的问题。当然，我们可以为一系列标准 DOM 事件中的每个事件分配一个处理程序给 <select> 控件。我希望在选择此选项时，可以选择将触发此选项的@ 987654326 <option> 987654325 @的指定处理程序。现在在我看来这是不可能的。
不可能如你所说。但是您可以从选择事件中获得相同的行为。您可以将我的答案翻译成纯 js。如果你不能，我会在星期一试试。在选择元素的“onchange”事件上放置一个处理程序并获取选定的选项。
非常感谢，我自己能做到。我的问题是，在我的项目中，我需要维护在某个页面中应用的处理程序的历史记录。最初，我将此历史记录创建为“动作”列表（又名对 [element, handler]），并且在此列表中没有包含任何重复前一个的对。但是在这种方法中，相同<select> 的不同<option>s 的连续选择看起来像相同的“动作”，因此只有第一个进入历史。这是因为现在我必须重新考虑这个算法。

【解决方案2】：

从讨论中可以看出，没有满足指定要求的 DOM 事件。

【讨论】：