Можно ли использовать шаблон 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

Ответ на вопрос в вашем заголовке: "Можно ли использовать шаблон Object.create для создания объекта CustomEvent?" это да. Теперь ответ на следующий вопрос: "Сделаете ли вы это так?" вероятно нет. Как указывал @MartinErnst, вы просто придумаете заново изобретать колесо того, что new уже делает.

Ключевая разница между new а также 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,

Поэтому, когда вы пытаетесь вызвать addEventListener() а также dispatchEvent() на выше customEvent1 объект, он потерпит неудачу, потому что это Object не Event, Есть еще несколько вещей, которые вам нужно сделать, чтобы конвертировать customEvent1 в полный Event объект, который по сути то, что new CustomEvent() уже делает.

Скрипка доступна здесь.

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