The source code for the examples in this post can be found in the test vjs Github repository found here. I do get around to editing this content once in a while, but it would be best to make a pull request there, or leave a comment this post if there is something you think needs to change here. I have a whole lot of other posts that I need to edit also, and the squeaky wheel gets the greasing.
In this section I will be touching base on just a basic example of the CustomEvent constructor, that can be used to create a custom user defined event object. The process just involves creating an event with the custom event constructor, and then passing that object to the dispatch event method of a DOM element reference. Once the dispatch event method is called any event handlers that are attached for that custom event will fire.
In the basic.js file that I am linking to in the html I am creating a custom event object with the Custom Event constructor, attaching a handler to the body element of the html document for it, and then dispatching the event for the body element like so.
In this section then I will be going over the source code of a module that will work in a browser, but I can also use in a nodejs script also. This helps to make my code more portable between a sever, and a client system which can have many benefits for a wide range of reasons.
So then as I see it thus far this kind of user event module will need to have at least three public methods. One method will be used to set up and event for an object, another will be used to add a listener for the event of an object, and the final one will be used to dispatch the event.
So First off lets get to the public method that will be used to create what the event is, and add it to an object. When it comes to this method alone there is a lot to cover when it comes to the various details such as if this kind of property should be attached to the own properties of an object, of if it should be a part of an objects prototype. However for now I do not want to get to far off topic when it comes to this so for now I am thinking that this add event method will just create an event for a single object, so I pass that as one argument with an additional object that contains properties that define what the event is. This includes a method that will fire each time the event is dispatched as well as the key name of the event. The result of calling this method will just set up and event for object. To use the event I need to add at least one listener for the event, and then dispatch the event elsewhere in my code. When defining what the for dispatch method is for an event the return value should be whatever it is that I want for an event object, and the arguments passed to this for dispatch methods are a reference to the object, and the options that where passed when the event was dispatched.
Next I have a add listener method that is what I will be using to define one of more event handlers, or listeners of you prefer that will be called each time an event is dispatched. Inside the body of this pubic method I am getting a reference to the listeners array that should be there after calling the add event method for the object. Once I have a reference to the listeners array it is just a matter of pushing the given callback function to this array of listeners.
The third public method that comes to mind is the method that I will call in my code that will be used to dispatch a given event. When calling this method I given an object with an event set up, and with at least one listener attached as the first argument. Then an event key as the second argument followed by an options object for the event. The method then just gets a reference to the listeners array, and then loops over the array and calls each event listener. When doing so it calls the for dispatch function for the event to create and pass alone the event object for the callback function of the attached listener.
After I create the player object then I will want to call the add even pubic method of the event module passing the player object as the first argument along with an additional object that will define what the event is. When doing so I set the event key property of this event info object to hit, and define what the for dispatch method should be for this hit event. Each time the hit event is dispatched in the game code I will pass an options object that should contain a damage value. So in the body of the for dispatch method I use this damage value to deduct from the hp value of the player object. I then return an event object that contains a reference to the player object, along with a damage value, and a boolean that will be ture if the player is dead.
So then I can use the same system on client side systems as a way to create user events, but then I can also use it in web worker as well as nodejs scripts. So Then it is possible to create some kind of game module that should work well in a browser window, a worker instance, or I can also run the game in a nodejs script. In some cases I might want to have a game state object run in a sever side environment, for examples if it is some kine of network game I would want the game to update on a sever, not a client system. That is unless I want to run the game module in a web worked as a way to off set some work to the clients rather than the sever. SO making modules like this helps to make my code more portable.
So now and then it become necessary to create my own events for things when it comes to working out a module for something. For example say I am making a game module and I want to provide a way to have an event that will fire each time and enemy is killed, or when the game is over. In the code that composes my state machine I can then attach event handlers for these to define some code that will run each time that at enemy is killed, or when a game is over that should not be parked in the main game module.
So the having a way to create these kinds of custom events can really come in handy in some cases. There might be alternative ways of doing so, and it can be a gray area as to the idea of doing so is a better idea or not. Ether way I am glad that there is a built in way to do this sort of thing anyway.
Well that is it for not with custom events in client side javaScipt, at some point in the future if I get some time to expand this post with some more examples I am sure I will edit this one again.