XML —

Events Associated with DHTML Objects

Another important part of the HTML code sample in the previous section is the use of events. When working with DHTML, events will form the foundation of your programming model. Using events, we can write code that responds to a user's actions. The events that are supported in most current browsers are: onblur, onchange, onclick, ondbclick, onfocus, onkeydown, onkeypress, onkeyup, onload, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup, onreset, onselect, onsubmit, and onunload.


The Event Object

The events listed in the previous section do not have any parameters. To get access to information such as which key was pressed and which mouse button was selected, you can use the event object. The event object contains a set of properties that can be used with these events. A partial list of the properties associated with the event object are: altKey, button, clientX, clientY, ctrlKey, fromElement, keyCode, offsetX, offsetY, screenX, screenY, shiftKey, srcElement, x, and y.

By using the events associated with DHTML objects and the event object's properties, you can have full control of an Internet Explorer 4 or Internet Explorer 5 Web-based interface.

You can also use the ID attribute when working with HTML element objects. This attribute represents the actual element object and can be used to get access to the element object's properties. You can manipulate the attributes for an element object by using the getAttribute, setAttribute, and removeAttribute methods and the ID attribute, as shown in the following example:

  <html>
      <head>
          <title>
              DHTML
          </title>
          <script language="vbscript">
              Function RealignHeader()
                  If FirstHeader.getAttribute("align")="middle" Then
                      FirstHeader.setAttribute "align", "center"
                  End If
                  MsgBox "The alignment for the h1 element is: " & _
                         Document.all("FirstHeader").align
              End Function
          </script>
      </head>
      <body>
          <h1 align="middle" id="FirstHeader">
              This page demonstrates DHTML.
          </h1>
          <p>
              This document contains several <br></br><b>tags</b>
              <br></br>
              <button type="button"  onclick="RealignHeader">
                  Click Me </button>
          </p>
      </body>
  </html>

This page is shown in Figure 13-2.

Figure 13-2. The DHTML page showing the h1 element's new attribute.

In this code, we used the onclick event of a button to change the alignment of the header. When you click the button, the header content This page demonstrates DHTML will become centered. Thus, we have changed the user interface with an event that was triggered by the user clicking a button.

It's possible to write DHTML that will work in both Netscape Navigator and Internet Explorer 4 and Internet Explorer 5 because both browsers share some common objects in their object hierarchy. The W3C DOM Level 2 specification includes a section on a set of objects used for the manipulation of HTML that essentially includes DHTML. We can hope that when the DOM standard is complete, all future browsers will support the DOM and code can be written to a standard set of objects. Internet Explorer 5 introduced a new feature called DHTML Behaviors, which are based on W3C standards and can be used to handle the events raised by DHTML objects. Let's take a look at DHTML Behaviors.