javascript — изменение dispatchEvent для элемента select не может быть обработано делегатом

Изменение dispatchEvent для элемента select не может быть обработано делегатом

У меня есть следующий фрагмент HTML: —

  {amp}lt;fieldset id="container"{amp}gt; {amp}lt;legend{amp}gt;Event Delegation Test{amp}lt;/legend{amp}gt; {amp}lt;button type="button" id="btn_select" name="select button"{amp}gt;Select{amp}lt;/button{amp}gt; {amp}lt;input type="text" name="first" autofocus/{amp}gt; {amp}lt;input type="text" name="second"/{amp}gt; {amp}lt;input type="text" name="third"/{amp}gt; {amp}lt;input type="text" name="fourth"/{amp}gt; {amp}lt;input type="text" name="fifth"/{amp}gt; {amp}lt;select name="Names"{amp}gt; {amp}lt;option{amp}gt;Tom{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Dick{amp}lt;/option{amp}gt; {amp}lt;option{amp}gt;Harry{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;/fieldset{amp}gt; 

Я установил делегирование события на fieldset (id = «container») и добавил событие изменения следующим образом:

 document.getElementById("container").addEventListener("change", e ={amp}gt; { let el = e.target, name = el.name, value = el.value; console.log("CHANGE element: %s has value %s", name, value);}); 

Я обнаружил, что с помощью следующего кода …

 select.value = "Harry"; select.dispatchEvent(new Event("change")); 

… не обнаружен обработчиком делегата.

НО это работает …

 select.value = "Harry"; let ce = new CustomEvent("change", { bubbles: true, cancelable: false }); select.dispatchEvent(ce); 

ПОЧЕМУ?

Мне не удалось найти какую-либо информацию об этой конкретной особенности варианта использования. Любое просвещение будет с благодарностью.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector