事件與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 ：

 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以便以不同於其他事件的方式對事件進行分類。 從舊規范中查看此圖形