From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 4.17: Events

So far, the type of programming we have done is largely linear in nature. Everything happens in sequence. This is not the way that web pages work. Users will generally not interact with the web page in a set order, but will do things in the order they want to do things. This interactive nature of the web page is great for the user but complicates things for the programmer dealing with the web page as you do not know what the user is going to be doing at any given time so you need to write your code in a special way to support this non-deterministic nature of the user. In computer science, we call this event-driven programming as instead of following sequences of steps, we need to react to what the user does by treating the different interactions the user can make as events.

The browser handles a lot of this work for us automatically, so as programmers we simply need to write code to handle the events. Under the hood, however, things are still sequential as that is the nature of software. This is handled through something called an event loop. When events happen to your web page, such as a key pressed on the keyboard, or the mouse being moved, an event is generated and added to the end of a queue. A queue is like the lineup at a grocery store or bank where you wait in line until the teller is available. This works the same way in the DOM, but instead of a teller we have an event dispatcher.

When your script is running, it continues to run sequentially just like you would expect. But once your code is finished running, the dispatcher gets control of the program an checks to see if there are any events in the queue. These events can have listeners. If there have been listeners attached to the event category, then each of those listeners get notified that the event has happened. This is done by calling a function that was set up as an event handler. This happens in the order that the events were added to the queue, with there being no easy way of knowing how long an event has been waiting in the queue.

This leads to the question about how to set up an event handler. There are several ways of adding a listener to an element, but for now we will stick with the old way of doing things as it is the easiest. In future chapters we will explore other ways of listening to events. For now, we will set events by setting the event handling method for the element and events that we are interested in. This can be done through code or right in the element itself. First let’s look at in code, and assume that the id for the element we want to modify in code is named “inCode”.

You can see that we still need to use the DOM method for getting the element before we can change anything. As we are grabbing the element outside of a function, the variable we are holding the element in is global which means it is available to all the functions in the program. This is not necessary a good programming practice but is unfortunately common in small scripts. Why global variables are bad is because they can be accessed everywhere which means they can be changed or altered anywhere making it possible to have a problem in one block of code being the result of a change to a global variable in a completely different and unrelated block of code. For this demo it isn’t an issue but is something you need to keep in mind when you start writing larger programs.

You will notice that we are setting an event handler to handle the onclick event, which is an event that happens when a mouse is clicked on a page element. Touch events will be mapped to onclick events so touching the button will trigger the same event. This is an existing function in our program, so we simply have the name of the function without any brackets after it. This is an important point. If you have brackets after the name of the function, then you are calling that function and putting the results of the call into the event handler. As this is not what we want in this case, we do not put the brackets as this is telling JavaScript that we want to have a reference to the function assigned to the onclick property.

It can be a bit of a pain to have to write a separate function to handle the event, especially when the function is just a single line. We do not need to create a separate function, but can simply create the function as part of the assignment as you can see by our code for setting onmouseenter and onmouseleave. These two events occur when the mouse enters the bounds of a page element or leaves that element. Here we are changing the background color as an indication of when the mouse is in or outside of the element.

While it is not that difficult to set up event handlers in code, you can set up the handlers right in the tag for the element.

There is a bit of a difference when you set up event handlers in the tag. The string used to indicate the handler for the event is the code that is going to be executed. This means that instead of naming the function you want to call, in a tag you need to perform the call to the function. This function would be in a script block in your program, and in this case would look like this:

You can still create functions, as we are doing for the onmouseenter event, but this is not really necessary. The code in that function could simply be written directly into the string, as is how we handle the onmouseleave handler.

Both methods have their advantages and disadvantages. Both have their supporters and detractors. For instance, some people think that all code should be in the script sections of your page so having code in a tag is evil. Other people think that code should be closest to where it is used so having the code set up in code is evil. I tend to be somewhere between the two extremes.

Now that we have a minimal understanding of the DOM and events, we know enough to be dangerous. Sorry, I meant to say we know enough to be able to make a more complex game. Next section I will outline the game you should be able to develop if you have followed along.