事件与CustomEvent

Question

我想知道,目的是什么CustomEvent,因为它可以很容易被老人模仿Event.

那么,有什么区别:

var e = new Event("reload");
e.detail = {
    username: "name"
};
element.dispatchEvent(e);

和

var e = new CustomEvent("reload", {
    detail: {
        username: "name"
    }
});
inner.dispatchEvent(e);

CustomEvent如果很容易将自定义数据附加到普通的Event对象,为什么会存在？

Answer 1

这是不一样的.您无法设置detail真正的CustomEvent:

var event = new CustomEvent('myevent', {detail:123});
event.detail = 456; // Ignored in sloppy mode, throws in strict mode
console.log(event.detail); // 123

var event = new Event('myevent');
event.detail = 123; // It's not readonly
event.detail = 456;
console.log(event.detail); // 456

是的,你可以使用Object.defineProperty.但我想重点是该论点CustomEvent应该设置一些事件的内部数据.现在它只考虑detail,内部没有使用.但是未来的规范可能会添加一些新东西,然后您可能无法通过使用属性来设置内部数据.

CustomEvent也继承自CustomElement.prototype.这只是添加detail和弃用initCustomEvent.但是您可以在其中添加自己的方法或属性,这些方法或属性不会被其他事件继承.但我不建议这样做,你不应该修改你不拥有的对象.

因此,基本上您可以使用CustomEvent以便以不同于其他事件的方式对事件进行分类.从旧规范中查看此图形