Day 9: Event Handling
such as onMouseOver and onMouseOut, which we worked with earlier
ability to react to a user created event. Here is a way to use
onMouseOver and onMouseOut to create a similar effect as a typical
image mouseover without using images:
<td bgcolor="white" onMouseOver="bgColor='blue'"
Calling the "bgColor" right inside the <td> allows
us to create the familiar effect without having to use images.Example: TD MouseOver
Another commonly used event is the "onLoad" Event,
which triggers when the page is loaded. This Event is usually
used inside the body tag. On way to use this effect is to "focus"
the cursor to the first field of a form, so that if a user begins
to type, the cursor is already in the appropriate location:
The "formName" and "formElement" are your
names for areas of the form. Example: Set
This function will allow us to use the "onChange" Event
triggered in a form in HTML to create a "drop down"
var opt = list.options[list.selectedIndex].value;
This function uses the "selectedIndex" to access which
selection the user has made, and takes that selection and sends
the user to that page, thereby creating a drop down navigation
tool. The Event that is accessed is the "onChange" Event,
which triggers when a user changes any form element. In this case,
merely selecting the drop down choice carries the user to the
selected page. The form setup to trigger this type of navigation
could look like this:
<select name="myList" onChange="jumpTo(myList)">
We can carry this concept further, and create a Navigation tool
for all of our pages. In this version, we will write all the pages
we wish to link to into arrays. One array will be for the link,
the other will be for the "label", or what we want the
user to see as the name of our link.
We then can carefully write a function to create the page, whereever
it is called:
We will call this function on our pages where we wish to create
the Select Menu. We have added code to be able to remove the current
page from the list of pages, so the user is not tempted to click
on the same page that they are currently on. To do this, we must
access a property of the "Location" object. This is
the same object we use to redirect the user over to the page they
have selected, only in this case, we need to look at where the
user currently is and not create an option, if they are already
on the requested page.
var thisPage = location.href;
In this case, "thisPage" will show the full current
URL. To be able to use this anywhere, we will strip off the domain
information, in fact, everything up to the final slash "/",
so we can use relative addressing:
var myStart = location.href.lastIndexOf("/")
//grab last slash
var myEnd = location.href.length //find length
var thisPage = location.href.substring(myStart+1,myEnd) //grab
what is past last slash, and compare
We use the function "lastIndexOf" to grab the last
occurrence in the URL string of the slash. Then we find the total
length of the URL, and use the "substring" function
to strip away everything before the slash. The "myStart"
and "myEnd" in this example are markers to keep track
of where to strip the string.
Here is a working example of the "createMenu" page:
We will continue to add more "Events" and "Event
Handlers" as we learn more techniques!