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”）上设置了事件委托，并因此添加了更改事件：

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

为什么？

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

Answer 1

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

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

事件传播的默认值（属性bubbles）为false。这就是为什么您的委托处理程序未收到change事件的原因。

选择元素上的dispatchEvent更改无法由委托处理

1 个答案: