JavaScript with DOM Events

Most of the basic aspects of JavaScript are not worth implementing if they are only used once during or at the end of a page loading. The real power of JavaScript comes in its ability to be used after a page has finished loading. There are two ways that JavaScript can be used at any time.

  • Through standard event listeners, of which there are several built in to every major browser. They are not browser specific and can run using the same code in every browser.
  • Through script monitoring where a constant loop implemented by the author is checking for conditions and running functions if those conditions are met.

DOM Events

DOM events are a way of telling the user's browser that it should fire an event when and if a predefined condition is met. This is not unlike the conditionals discussed in the previous section but these conditionals require no code from the author to check the condition, you only write code to react to the fullfillment of the condition.

Let's refresh our memory to start.

The acronym DOM refers to the "Document Object Model" which defines the way in which HTML, XHTML and other derivitaves are read. Basically it typically refers to the HTML document itself.

And what does the "event" refer to...?

An Event is simply a point in time for a specific action. The mouse cursor entering the space of an element, leaving the element, or and actual mouse click (both up and/or down) may be an "event".

So of course a "DOM Event" refers to events that relate to nodes / elements that exist within the main document.

Mouse Events

Let's look at a simple example of an "onClick" event. While other events will change the number and types of attributes and properties within an HTML element all events will follow the same structure to call JavaScript functions.



<body>

<style>
.button {
	position:relative;
    width:200px;
    height:100px;
    line-height:100px;
    text-align:center;
    background-color:pink;
    outline:1px solid black;
}
</style>

<div id="button_id" class="button" onclick="js_function()">
Click here!
</div>

<script>
function js_function() {
    document.getElementById("button_id").style.backgroundColor = "lightblue";
}
</script>

</body>

If you were to copy the above code window to a text document and open that document in a web browser then you should end up with a square, pink box that simply says "Click here!". Upon being clicked the box should turn blue.

Let's walk through what is happening in this code one step at a time.

  1. The css styling is setting the default backrgound color of the rectangle to pink within the ".button" class.
  2. The div element that represents the actual rectangle content has attributes for a unique identifier, the styling, and an "onclick" event defined. When the page is loaded the element will automatically listen for mouse click events on this specific element.
  3. The script element contains a function that is NOT run when the page loads.
  1. After page is loaded the user clicks on the div element (anywhere within the width and height of it).
  2. On click the "onclick" event is directing the browser to run the "js_function()" function.
  3. The browser then looks through the script to find the function with the matching name. If it finds one then it runs it.
  4. The function with the name of "js_function" has one line of code. This line of code retrieves a specific element (getElementById) with a specific name ("button_id") from the DOM and accesses the background color style (style.backgroundColor) property.
  5. The same line assigns the value "lightblue" to that property. This is what changes the color of the box.

You might wonder if we can change the color back through multiple clicks. Of course we can! We just insert a few more lines of code to do two things.

  • Keep track of the current color.
  • Check for what the current color is.

We can do this by use of a simple integer to keep track of the color (we could use a string, we'd just have to check for the word instead) and an "if" statement.

You can do this by changing the "script" section to the following code.



<script>

var color = 0;

function js_function() {
	if( color == 0 ){
		color = 1;
    	document.getElementById("button_id").style.backgroundColor = "lightblue";
    } else {
    	color = 0;
    	document.getElementById("button_id").style.backgroundColor = "pink";
    }
}

</script>

This results in the following box. Go ahead and click it to try it out.

Click here!

Similar code can be used to reverse the effects of most any change. This is helpful to show and hide menus or allow for user customization of the interface.

Remember that just because this example dealt with changing the styling of the element that called it, that doesn't mean it has to! It's perfectly possible for one div to listen for the click and the called function to affect a completely different div. The "getElementById" method can look for any div with a unique "id" attribute.

Keyboard Events

TBD