委托无法处理select元素上的dispatchEvent更改

我有以下html代码片段：

        <fieldset id="container">
            <legend>Event Delegation Test</legend>
            <button type="button" id="btn_select" name="select button">Select</button>
            <input type="text" name="first" autofocus/>
            <input type="text" name="second"/>
            <input type="text" name="third"/>
            <input type="text" name="fourth"/>
            <input type="text" name="fifth"/>
            <select name="Names">
                <option>Tom</option>
                <option>Dick</option>
                <option>Harry</option>
            </select>
        </fieldset>

我已经在fieldset (容器“id=”)上设置了事件委托，并添加了如下更改事件：

document.getElementById("container").addEventListener("change", e => {
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);

为什么？

我找不到任何关于这个特殊用例特性的信息，任何启迪都将不胜感激。

转载请注明出处:http://www.smbzepe.com/article/20230401/2281954.html

相关阅读