Question

我知道您可以像这样创建一个CustomEvent：

var wordCreated = new CustomEvent(
    "newWord", 
    {
        detail: {
            word: "hola",
            translation: "hi",
        },
        bubbles: true,
        cancelable: true
    }
);

我想知道如何在不使用new模式的情况下执行此操作？

我没有看到解决方案的问题是Object.create有两个参数：一个指定事件名称的字符串，一个包含CustomEvent，bubbles的配置对象和cancelable属性。我不确定如何将字符串和对象都传递给details。

最终，我希望能够以下列标准方式使用此自定义事件：

Object.create

Answer 1

标题中问题的答案＆＃34;是否可以使用Object.create模式创建CustomEvent对象？＆＃34; 是。现在，回答后续问题＆＃34;你应该这样做吗？＆＃34; 可能是否。正如@MartinErnst指出的那样，你最终会重新发明new已经在做的事情。

key difference between new and Object.create（如果您还不知道）是Object.create创建Object（请注意大写 O ）继承指定为Object.create的第一个参数的对象原型。在返回指定对象的实例（注意小写 o ）之前，new运算符执行与调用给定对象的构造函数的附加步骤相同的操作。

因此，我们可以使用Object.create创建一个Object，它继承自CustomEvent原型，具有以下内容：

var customEvent1 = Object.create(CustomEvent, {  
                     detail: {
                        writable:true, 
                        configurable:true, 
                        value: { word:"hola", translation:"hi" }
                      },
                      bubbles: {
                        writable:true,  
                        configurable:true, 
                        value:true 
                      },
                      cancelable:  {
                        writable:true,  
                        configurable:true, 
                        value:true 
                      },
                      type: {
                        writable:true,
                        configurable:true,
                        value:'newWord'
                      }
                    });

但执行console.log(customEvent1)会产生Object。

将此对比：

var customEvent2 = new CustomEvent("newWord", { 
                     detail: {
                      word: "hola",
                      translation: "hi",
                     },
                     bubbles: true,
                     cancelable: true
                   });

您会看到正在运行console.log(customEvent2);会产生CustomEvent的实例。

因此，当您尝试在上述addEventListener()对象上调用dispatchEvent()和customEvent1时，它将失败，因为它是Object，而不是Event 。您需要执行一些步骤才能将customEvent1转换为完整的Event对象，这基本上就是new CustomEvent()已经在做的事情。

提供小提琴here。

Answer 2

我认为应该是这样的：

obj.addEventListener("newWord", function(e) {alert(e.detail);});

var wordCreated = Object.create(CustomEvent.prototype, {
  "newWord": 
    {
        detail: {
            word: "hola",
            translation: "hi",
        },
        bubbles: true,
        cancelable: true
    }
});

是否可以使用Object.create模式来创建CustomEvent对象？

2 个答案: