javascript - new Event('build') vs new CustomEvent('build')

På denna MDN-sida Creating and Triggering Events visas ett exempel på att skapa ett event med Event eller CustomEvent. Det förklarar att CustomEvent tillåter anpassade detaljer, men utöver det säger det inte mycket.

Så, vad är skillnaden? Om jag skapar ett generiskt scroll-event, bör jag använda CustomEvent? Eller är det bara för event som inte finns i JavaScript?

Jag märkte också att MouseEvent också är ett barn till Event, så om jag skapar ett klickhändelse kan jag bara använda new MouseEvent('click')?

Tack

Svar #1

Från den guiden:

För att lägga till mer data till händelseobjektet finns CustomEvent-gränssnittet och detail-egenskapen kan användas för att överföra anpassad data.

Du kan använda Event() för vad som helst. Om du vill bifoga anpassad data använder du CustomEvent('eventName', {data}).

Och ja, för mus-händelser bör du använda MouseEvent.

Svar #2

I alla moderna webbläsare:

const ev = new Event('foo')
ev.whatever = 123
console.log('event:', ev.whatever)

Vi kan helt enkelt använda Event direkt på det sättet, eller till och med utöka från Event för att skapa ett anpassat event:

class MyEvent extends Event {
  whatever = 123

  constructor() {
    super('my-event', {bubbles: true, composed: true, cancelable: false})
  }
}

someElement.dispatchEvent(new MyEvent()) // simple and done.

Numera finns det absolut inget behov av att CustomEvent ens existerar, och vi kan helt enkelt använda Event.

Tidigare kanske det inte var möjligt att ärva från Event med pre-ES6 function-klasser, men denna begränsning har länge övervunnits i alla webbläsare, och class-klasser kan ärva från inbyggda klasser.