USE EVENTS TO CREATE DYNAMIC PAGES

You can create interactivity on your pages by assigning a block of JavaScript code to an event handler; for example:

<input id="button1" name="button1" type="button" onclick="showMe()" value="Click Here!">

The event handler is specified as an attribute of the HTML input tag; in this case, onclick is actually HTML, not JavaScript!

To use this on your page, you need both a JavaScript function in a script block as well as an HTML form, as in the following:

<script type="text/javascript" language="JavaScript"> <!-- function showMe() { alert("Here you go!"); } // --> </script> <form id="form1" name="form1"> <input id="button1" name="button1" type="button" onclick="showMe()" value="Click Here!"> </form>

You may have seen event handlers written in camel notation -- in other words, onClick rather than onclick. HTML is not case sensitive, so you can use either one. Event handler names are always lowercase in JavaScript; however, XHTML also requires the lowercase version.

As with the timer example in Lesson 5, you can call a function or you can write the complete code block instead, such as:

<input type="button" onclick="alert('You clicked?')" id="button1" name="button1" type="button" value="Click Here!">

Event handlers can also be used as a JavaScript property, as in the following code:

document.form1.button1.onclick=showMe;

JavaScript dot notation is used to indicate the path through the document tree to button1 and the event handler. In this case, onclick is JavaScript, not HTML. For more information on the document tree, see the section "The Document Tree" later in this lesson.