javascript - 选择元素上的 dispatchEvent 更改不能由委托(delegate)处理

Question

我有以下 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>

我在字段集 (id="container") 上设置了事件委托(delegate)并因此添加了更改事件:

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"));

...委托(delegate)处理程序未检测到。

但这确实有效...

select.value = "Harry";

let ce = new CustomEvent("change", {
    bubbles: true,
    cancelable: false
});

select.dispatchEvent(ce);

为什么？

我一直无法找到有关此特定用例特性的任何信息任何启发将不胜感激。

Answer 1

您必须明确指定事件传播:

new Event("change", {"bubbles": true});

事件传播(属性 bubbles)的默认值为 false。这就是为什么您的委托(delegate)处理程序没有收到 change 事件。