Creating a new event using 'build' versus creating a custom event with the same name 'build'

While browsing the MDN page on Creating and Triggering Events, I came across an example showcasing the creation of events using Event or CustomEvent. The article mentions that CustomEvent allows for custom details, but doesn't elaborate much on the differences between the two.

So, I'm left wondering - what exactly sets them apart? Should I opt for CustomEvent when creating a generic scroll event, or is it specifically designed for events not inherent to JavaScript?

Furthermore, I also discovered that MouseEvent is a child of Event. Does this mean that when creating a click event, I can simply use new MouseEvent('click')?

Any insights on this topic would be greatly appreciated. Thank you!

javascript

Answer №1

The following information is provided in the guide:

In order to include additional data in the event object, the existence of the CustomEvent interface allows for the utilization of the detail property for passing custom data.

Utilizing Event() is versatile. Should there be a need to include custom data, the implementation of CustomEvent('eventName', {data}) is recommended.

Furthermore, for mouse events, it is advised to utilize MouseEvent.

Answer №2

Within the realm of current web browsers:

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

We have the ability to utilize Event directly in this manner, or go a step further and create a customized event by extending from Event:

class MyEvent extends Event {
  whatever = 123

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

someElement.dispatchEvent(new MyEvent()) // incredibly simple.

At present, the need for CustomEvent has virtually diminished, as Event serves its purpose.

Previously, in the era of pre-ES6 function classes, extending from Event may have posed challenges, but this obstruction has been eradicated in all web browsers, allowing classes to extend from native classes.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Failure to achieve success with jQuery Ajax

success in my AJAX call is not triggering at all, leaving me puzzled as to why. None of the alerts specified in the AJAX file are appearing. The form: <form onsubmit="check_reg();return false;" method="post" name="reg_form" id="reg"> <label ...

javascriptjqueryajax

What is the best way to eliminate the input range in a React date range picker?

Here is an image illustrating a date range picker: https://i.stack.imgur.com/pwKaI.png I am looking to remove the labels for days before today and starting from today in the date range picker. How can I achieve this? Below is my code snippet: class Better ...

javascriptreactjsreact-daterange-picker

Is it possible to add a vertical scrollbar to the vertical navigation pills on a Bootstrap

Is it possible to create a vertical scroll bar for my nav pills when they exceed the screen size? /* * * ========================================== * CUSTOM UTIL CLASSES * ========================================== */ .nav-pills-custom .nav-link { c ...

javascripthtmlcssbootstrap-4

Troubleshooting a Peculiar Problem with Form Submission in IE10

Please take a look at the code snippet provided below: <!DOCTYPE html> <html> <body> <form name="editProfileForm" method="post" action="profileDataCollection.do"> <input type="text" id="credit-card" name="credit-card" onfocu ...

javascripthtmlsubmitinternet-explorer-10onfocus

Is there a way to use JQuery to make one button trigger distinct actions in two different divs?

For instance: Press a button - one div flies off the screen while another div flies in. Press the button again - Same div flies out, other div returns. I'm completely new to Javascript/JQuery so any assistance would be highly appreciated! Thank you ...

javascriptjqueryhtmlcss

Implementing a Vue.js Scrollable Table

I am currently working on a table that is populated using the vue.js v-for method: <table> <tr><th>Name</th><th>Surname</th></tr> <tr v-for="user in users"><td>@{{user.name}}</td><td>@{ ...

javascriptjqueryhtmlcssvue.js

How to choose an option from a dropdown menu using React

In a React application, I am creating a straightforward autocomplete feature. The code is outlined below. index.js import React from 'react'; import { render } from 'react-dom'; import Autocomplete from './Autocomplete'; co ...

javascripthtmlcssreactjsautocomplete

Unlimited possibilities with parameters on an express server

I've set up React Router with recursive parameters, similar to the example here. On my Express server, I'm attempting to handle routes like /someRoute/:recursiveParameter? router.get('/someRoute/:recursiveParameter?', async (req, res ...

javascriptnode.jsexpress

Cancelling measurements in Potree/three.js

Currently, I am utilizing Potree for the display of a large point cloud dataset, which can be found at https://github.com/potree/potree. I am attempting to initiate an area-measurement using Potree.MeasuringTool, which is typically stopped or accepted wit ...

javascriptthree.js

What steps can I take to fix the Error with webpack's style hot loader JavaScript?

Just starting out with native script and encountered an issue when running this code: <template> <view class="container"> <text class="text-color-primary">My Vue Native Apps</text> </view> </template> &l ...

javascriptcssvue.jsnativescriptnativescript-vue

Is it necessary to register a client script again after a post-back event?

Is it necessary to re-register a client-script block on all post-backs if it is added on the first page load like this? if (this.Page.IsPostBack==false) { if (this.Page.ClientScript .IsClientScriptI ...

javascriptasp.netpostbackregisterclientscriptblock

It appears that my array is not being properly populated by my callback functions

I am encountering an issue with my callback functions. The objective of my code is to send 16 GET requests to a REST API in order to retrieve 16 distinct JSON files. These JSON files are then supposed to be converted into dictionaries representing the foot ...

javascriptjqueryjsoncallbackget

JavaScript Evaluation Test Outcome

(Apologies, I am still in the process of learning JavaScript) My goal is to create a checklist quiz that provides different outcomes based on the number of checkboxes selected by the user. There are a total of 7 checkboxes, and if the user selects 1 or few ...

javascripthtml

What is the purpose of the Express 4 namespace parameter?

Having worked extensively with Express 4, I recently attempted to implement a namespaced route with a parameter. This would involve routes like: /:username/shows /:username/shows/:showname/episodes I figured this scenario was ideal for express namespacin ...

javascriptnode.jsexpress

Node.js and EJS are throwing an error, indicating that the file.ejs is unable to identify the variable definitions

I am facing an issue with my express.js server template. A 'x is not defined' error keeps popping up, but I can't seem to find where the problem lies. I even checked a friend's code from the same tutorial, and it works on his machine. ...

javascriptnode.jsexpressejsembedded-javascript

Attempting to retrieve currentScript is causing a typeError to be thrown

I'm attempting to access a custom attribute that I added to my script tag: <script type="text/javascript" src="https://.../mysource.js" customdata="some_value"></script> To make this work on Internet Explorer ...

javascripthtml

Unpredictable Dependency Outcomes in Node.js

Encountering a warning while running yarn install where all dependencies are installed, but a specific warning is triggered: Warning: Pattern ["esprima-fb@~3001.0001.0000-dev-harmony-fb"] is attempting to unpack in the same destination "/Users/Me/Librar ...

javascriptnode.jsexpressnpmyarnpkg

C# - Issue with Webbrowser failing to fully load pages

I am facing an issue with loading pages completely on the web browser, likely due to heavy usage of JavaScript. To address this problem, I have integrated another browser into the project called Awesomium. I am wondering if Awesomium supports using getEle ...

javascriptc#getelementbyidawesomiuminvokescript

I'm curious about utilizing jsviews in conjunction with jquery sortable

Check out my jsFiddle Example where I am using jsViews in conjunction with JQuery sortable. By default, the remove function works fine; however, when you change the order of items and then try to delete one, multiple items are removed. How can this issue ...

javascriptjqueryjquery-uijsrenderjsviews

Field must have a base type specified to proceed

Currently, I am in the process of developing a discord.js bot. The structure I have set up involves a folder that contains all the commands, and when a command is called, index.js directs it to the appropriate file. However, when attempting to run the bot, ...

javascriptnode.js