Custom Events in Javascript (CustomEvent)

Custom Events in Javascript (CustomEvent)

how's it going guys my name is DOM and today I'm going to show you how to make and trigger your own custom events in JavaScript so what we have here is currently a web page with a single h2 header tag with an ID of number and just the number zero inside it in the browser we can take a look at it and we just see the number zero and then that's it so what we're going to do is actually make it so you can change the number inside this tag and the color of this text using a custom event so to get started we'll just go inside the code here and just make a new constant for this header tag we'll talk about const header tag equals get element by ID and just pass in number just like that so now with this we're gonna do something like this we're gonna say header tag dot add event listener I'm gonna listen for the number change event this event is custom and we're gonna make it very soon but right now this is a custom event that we defined ourselves and we're gonna say for the event handler a function so the same thing is normal with e the event object being passed in so it works just like a normal event except you make yourself so now inside here what we're gonna do is we're gonna change the the text in the header tag and also the color of the text so we can say header tag dot text content equals and we're going to use the event object here we're gonna say e dot detail dot number and then we construct the custom event we're going to make the detail property and make the number property and of course also make the event object itself now for the for the text color we're gonna do a similar thing you're gonna say header tag dot style dot color equals e detail dot text color and that is all for the the add eventlistener method and also the event handle now we're going to actually make the event itself so to change the the number we're going to go inside the console in the browser and we're just going to say something like change number and then you know put something like 20 and then red and we expected this function right here to change the color of the text to red and the number to be 20 so we're going to define this function right now and this function will actually just make the event and then dispatch it so then here we go we'll just say function change number and we need a except a a number to change and also a color so NNC now is where it gets interesting so we're gonna make our custom event right here we're going to make a new variable R so a new a new constant called event equal to a new custom event and this is a real JavaScript class or object so this is a real thing a new custom event and we're gonna say the event name is a number change and that's going to match up with that event listener right there now we're going to pass in the event object so this object literal right here is the event object now we need to use the detail property just here so detail is a specific property that comes with the custom event class and you need to use detail in order to pass properties or extra data to your event handler with data we'll just say you know another object I'm gonna say number n and then text color C so you can see how these two properties match up with this and this I'm obviously getting end from the function variable and also see from the function sorry parameter that's all for the custom event now we can simply just dispatch the event so we want to call the event handler we can say hit attack dot dispatch event and then pass in the event object and that is all it takes let's now see in the browser what happens go back in here will refresh and we'll tapia change number put down fifteen and then yellow or maybe maybe blue press Enter boom so you can see how we've changed the color of the text and the number in the text using a custom event so just one more time to recap we have we're adding an event listener to the head attack called number change this is a completely custom name for an event number changed within defining the event handler which accepts an event object just like normal and we're getting and where we're changing the text content of the header tag equal to the event object data number so we're we're getting data from the event object itself and same thing for the color now when we have the the change number method or function we're making a new event a new custom event called number change which matches up with this and we're passing in our own custom data through the detail property and they were simply just printing out or sorry we're simply just calling the event on the header tag all right that is how you can create your own custom events in JavaScript thank you for watching and see you later


8 thoughts on “Custom Events in Javascript (CustomEvent)”

  • Juan Cruz Rabaglia says:

    I dont see the usefulness on this. You are already calling a function, why dont you just do the login in changeNumber?

  • William James Rapp says:

    I have a FUNCTION type you can talk about which would help a PLETHORA of people. As I have stated before I am just trying to wrap my own head around JS so there is a lot I still do not understand , but what I am doing is working on building my own web site using WIX ( only because I am on a time frame that learning how to learn all the various codes I need to learn to make WHAT I NEED MADE and make it work I just do not have the time ). I have studied HTML and CSS ( on my own ) and do okay but not well enough to make things work the way I want.

    Using WIX has allowed me to complete an entire web site database design and blog in about 1 weeks time — however — there is a FUNCTION that I need to figure out to make the final pieces of my WEBSITE PUZZLE all come together. Now I have been told by several others to forego with what I want and employee what is simple — in the over all scheme of things the SIMPLE – SOUNDS SIMPLE but in reality I would be selling my web site functionality SHORT and in the end LOOSE OUT on marketability and customer satisfaction and therefore in the long run SIMPLE would not Equal PROFITABLE — some people just cant figure that out as I constantly hear — SOME MONEY IS BETTER THAN NO MONEY — <—- THAT is not how I operate in life — I try my best not to HALF ASS anything.

    SO — let me give you a quick idea of what I am working on and then I will tell you where I am stuck and perhaps you can fashion a video ( of sorts ) that can touch on the concept so that myself and THE WORLD can benefit from this one — seemingly simple — function.

    My web site is a data base driven web site People come to my site search data – ENTER DATA and leave.

    — ACCESS to the site is FREE — not a membership site
    — Searching data is FREE
    — One page data can be submitted to the database for FREE
    — One page data is entered to the data base for a FEE $$$ ( actually just one $ small fee ) <— this data can be searched by anyone for FREE
    — One page data set is entered for a small FEE <— this data is not public access and only the person who entered the data and ADMIN can access this data.

    What I am trying to figure out and learn is a small function which goes like this — A person enters their data then on the data form page they press NEXT they are taken to a PAYMENT METHOD PAGE — they complete the payment page and press SUBMIT —- **when the payment process is confirmed** –> THEN the data goes into the data base.

    Sounds simple to me — Even though I know nothing about coding per se I know this can be done — YET — NO ONE SEEMS TO KNOW HOW to DO It.

    This process can benefit SO MANY people HOW DOES IT WORK ?

  • William James Rapp says:

    Interesting. I am still trying to learn and understand — JS — so not sure I am going to be able to use yet what I do not understand. I am working on a WIX platform web site build and I need a specific function to take place and WIX allows JS code to be entered – I really need to figure JS out as no one will help me. I'll keep watching these videos a dozen times over till it starts to sink in

Leave a Reply

Your email address will not be published. Required fields are marked *