Какие события выбрать, чтобы делегировать обработчик из <select> выбранному <option>?

Question

Когда другой <option> выбран в <select> можно обработать это событие с помощью <select>обработчик довольно прямолинейно. Однако по некоторым причинам для моего проекта было бы очень удобно использовать делегированный <option>обработчик вместо. Я попытался вызвать и делегировать необходимый обработчик с использованием различных событий. Результаты были неудовлетворительными:

• onfocus, onchange а также onkeyup обработчики срабатывали только на <select> контроль и не были запущены на вложенном <option>,
• onclick Обработчик работал по мере необходимости и был делегирован (срабатывает на выбранном <option>). Однако, очевидно, что нет смысла использовать этот обработчик, как другой option в select управление также может быть выбрано с помощью клавиатуры, а не только мышью.

Я прав? Я пропустил какое-либо стандартное событие DOM, которое можно использовать в этом случае? Или я должен использовать только вид полифилла, как у jQuery focusin а также focusout?

Answer 1

Из обсуждения следует, что нет событий DOM, которые соответствуют указанным требованиям.

Answer 2

Я не уверен, что прекрасно понимаю вашу потребность, но я постараюсь ответить.

Как вы говорите о 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>