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

【问题标题】：Is it possible to use the Object.create pattern to create a CustomEvent object?是否可以使用 Object.create 模式来创建 CustomEvent 对象？
【发布时间】：2014-11-18 17:39:08
【问题描述】：

我知道你可以像这样创建CustomEvent：

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

我想知道如何在不使用new 和Object.create 模式的情况下做到这一点？

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

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

var p = document.querySelector('p'); // a random node
p.addEventListener('newWord', function(ev){ console.log(ev) });
p.dispatchEvent(wordCreated);

【问题讨论】：

我现在正在删除我的答案，直到我有机会进一步研究它。道歉。
为什么不使用在您的第一个 sn-p 中创建的事件来执行 p.dispatchEvent(wordCreated);？这就是CustomEvent 的用途。重新发明轮子？
我正在尝试了解如何在这种情况下应用 Object.create 模式。是的，现有模式运行良好。

标签： javascript dom-events object-create

【解决方案1】：

标题中问题的答案“是否可以使用 Object.create 模式来创建 CustomEvent 对象？”是是的。现在，对于后续问题“你要那样做吗？”的答案可能是否。正如@MartinErnst 指出的那样，您最终将重新发明new 已经在做的事情。

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

所以我们可以使用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 的实例。

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

小提琴可用here。

【讨论】：

CustomEvent.prototype 是不可配置和不可写的，因此您不能以这种方式重新定义它。这导致myCustomObject 的所有可配置属性（包括type）未定义。

【解决方案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
    }
});

【讨论】：

是的，确实如此。用冒号替换逗号可以消除语法错误。我仍然不知道这是否可行。我正在调查。我喜欢这个问题。
isim 的答案是正确的方法。我对他的支持。我会将这个问题标记为收藏，因为我很快就会使用这种方法。
我不明白 isim 的代码有什么问题。它在小提琴上工作得很好。
@Verhaeren 我已经更新了我的答案，为什么在使用 CustomEvent 创建的 CustomEvent 对象上调用 dispatchEvent() 会失败。
Object.create 的第二个参数必须是属性描述符对象。