Возможно ли использовать шаблон Object.create для создания объекта CustomEvent?

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.

В конечном счете я ожидаю, чтобы иметь возможность использовать этот пользовательское событие следующим стандартным образом:

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

Answer 1

Ответ на вопрос в вашей title «Возможно ли использовать шаблон Object.create для создания объекта CustomEvent?» - Да. Теперь ответ на последующий вопрос «Вы сделаете так?», вероятно, No. Как отметил @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.

Contrast это:

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().

Fiddle available 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 
    } 
});