事件与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);

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

Answer 1

它不一样。您无法设置真实CustomEvent的detail：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

所以基本上你可以使用CustomEvent来对事件进行不同于其他事件的分类。请参阅old spec

中的此图表