Не работает делегирование для

Автор вопроса: Kirill Inkin

Не работает делегирование, когда я хочу чтобы обработчик обрабатывал все события внутри <select>. Вроде всё делал по учебнику и пробовал разные типы событий, но всё равно, всплывает только элемент <select>:

const selects = document.getElementById('select_nav_option')
selects.addEventListener('change', function(e) {
  console.log(e.target)
})

<select id="select_nav_option" class="dark_theme">
  <option class="option_config">Генератор конфига</option>
  <optgroup label="Генератор ACL">
    <option class="option_acl">CSC</option>
    <option class="disableContent option_acl">ZBUT</option>
    <option class="disableContent option_acl">BO</option>
    <option class="disableContent option_acl">Mini-CSC</option>
  </optgroup>
  <option class="disableContent option_vpn">Генератор VPN</option>
</select>

Источник

Ответы (1 шт):

Автор решения: Igor

Так и должно быть. change - это событие элемента select.

const selects = document.getElementById('select_nav_option')
selects.addEventListener('change', function(e) {
  console.log(e.target.value, e.target.options[e.target.selectedIndex])
})

<select id="select_nav_option" class="dark_theme">
  <option class="option_config">Генератор конфига</option>
  <optgroup label="Генератор ACL">
    <option class="option_acl">CSC</option>
    <option class="disableContent option_acl">ZBUT</option>
    <option class="disableContent option_acl">BO</option>
    <option class="disableContent option_acl">Mini-CSC</option>
  </optgroup>
  <option class="disableContent option_vpn">Генератор VPN</option>
</select>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.