DHTML Behaviors

This document describes technologies available in the Internet Explorer 5 Beta. While we encourage you to evaluate these features and to send us your feedback, please note that these features are subject to change.

One of the most exciting new features introduced in Microsoft® Internet Explorer 5 is Dynamic HTML behaviors. DHTML behaviors are simple, lightweight components that encapsulate specific functionality or behavior on a page. When applied to a standard HTML element on a page, a behavior enhances that element's default behavior. For example, a behavior can be created that toggles the display property of an element's children on a mouse click. When this behavior is applied to a standard UL element on a page, it enhances the unordered list's default behavior to expand and collapse when clicked. Similarly, another behavior can incrementally set the position of the element from a start point to an end point on the screen. If this behavior is applied to an IMG element, it causes an otherwise statically positioned image to fly across the screen.

As encapsulated components, behaviors provide easy separation of script from content. This not only makes it easy to reuse code across multiple pages, but also contributes to the improved manageability of the page. In addition, the simple declarative syntax Internet Explorer provides makes applying a behavior to an element as easy as attaching a style to an element on a page through the proposed new cascading style sheet (CSS) behavior attribute.

This article covers the benefits that behaviors bring to DHTML, lists the default behaviors that are bundled with Internet Explorer 5, discusses cross-browser issues that may arise when using behaviors, and, finally, provides links to related topics.

Benefits

DHTML behaviors add great value to a Web application environment, making things easier for everyone involved in the Web development process. In the real world, this environment consists of a team of content authors, designers, and engineers. Content authors are responsible for writing content. Designers determine what interactive effects can be added to the content, while engineers implement those effects.

The following section outlines the advantages to using behaviors, and the benefits they provide to a Web development team.

Provides a Means for Script Encapsulation and Code Reuse

With behaviors, it is easy to add interactive effects as encapsulated components that can be reused across multiple pages. For example, consider one of the more popular effects made possible in Internet Explorer 4.0: mouseover highlights. Through the use of CSS rules, and the ability to change styles on the fly, it is easy to achieve this effect on a page. In Internet Explorer 4.0, the way to implement mouseover highlights on a list item, or LI, would be to handle the onmouseover and onmouseout events in this manner:

<HEAD>
<STYLE>
   .HILITE  { color: red; letter-spacing: 2 }
</STYLE>
</HEAD>

<BODY>
<UL>
  <LI onmouseover="this.className='HILITE'"
      onmouseout ="this.className=''">HTML Authoring</LI>
</UL>
</BODY>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

In Internet Explorer 5 or later, a DHTML behavior can be implemented to achieve this effect. This behavior, when applied to an LI element, extends the list item's default behavior to change its color when the user moves the mouse over it.

The following example implements a behavior in the form of an HTML Component (HTC), contained in a file called hilite.htc, to achieve the mouseover highlight effect. The behavior is applied to the LI with the familiar STYLE block, using the proposed CSS behavior attribute that specifies the location of the behavior. With the behavior applied, the preceding code can look something like this in Internet Explorer 5 and later:

<HEAD>
<STYLE>
   LI {behavior:url(hilite.htc)}
</STYLE>
</HEAD>

<BODY>
<UL>
  <LI>HTML Authoring</LI>
</UL>
</BODY>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Because the behavior is contained in a separate file, it can be reused across multiple pages to achieve a similar effect throughout an entire Web site.

Note that the behavior in the preceding example, just like any CSS attribute, could have been applied inline to the LI element, as shown in the following example:

<BODY>
<UL>
  <LI STYLE="behavior:url(hilite.htc)">HTML Authoring
</UL>
</BODY>

Other ways to apply behaviors to elements are discussed in a separate article, Using DHTML Behaviors.

Empowers Designers to Add Interactive Effects with a Simple Declarative Syntax

Currently, the task of adding interactive effects to a page can involve a lengthy iterative process between the designer and the engineer trying to give the page that perfect look. The designer, usually with limited programming background, mocks up the desired effect on the content in a desktop publishing environment, and works closely with the engineer to achieve the same effect on the page, usually with Dynamic HTML.

With behaviors, an engineer can work independently on encapsulating the desired effect in a separate file, while the designer applies that behavior to elements on the page with a few CSS attributes. By providing a simple declarative syntax, requiring no prerequisite knowledge of scripting and DHTML, behaviors empower Web designers to easily add interactive effects to an otherwise static content. As seen in the preceding example, adding a mouseover highlighting effect on a list item is as easy as adding the familiar STYLE block, in the exact same way a style is attached to an element through CSS.

Isolates Script from Content, Resulting in Cleaner, More Manageable Pages

Behaviors provide easy separation of script from content, as it moves all script contained in a page into a separate file. The previous example demonstrated how the script to handle the onmouseover and onmouseout events was moved to a separate file, hilite.htc. This example can be extended to implement displaying and hiding content, making it even easier to see how behaviors can make a difference, and how script isolation results in a cleaner, script-free page.

The following example demonstrates the use of the two effects, mouseover highlight and displaying/hiding content, in a table of contents scenario. The same example has been implemented two different ways:

For Internet Explorer 4.0, using Dynamic HTML

Using Dynamic HTML to implement a simple table of contents in Internet Explorer 4.0 requires a combination of HTML and script on the page.

Sample Code

<HEAD>
<SCRIPT>
function init()
{
   var coll = document.all.tags("LI");
   if (coll != null)
   {    
      for (i=0; i < coll.length; i++) 
        if (coll[i].className == "COLLAPSING")
          coll[i].style.listStyleImage = "url('/workshop/graphics/blueminus.gif')";
   }
}

function expandCollapse ()
{
   oSource = event.srcElement;
   if (oSource.className != "COLLAPSING")
      return;

   oChild = document.all(oSource.getAttribute('CHILD', false));
   if (oChild.style.display=='none')
   {  
     oChild.style.display='';
     event.srcElement.style.listStyleImage='url(/workshop/graphics/blueminus.gif)'
   }
   else
   {
     oChild.style.display='none';
     event.srcElement.style.listStyleImage='url(/workshop/graphics/blueplus.gif)'
   }
}

function doMouseOver()
{
   oSource = event.srcElement;
   if ((oSource.className != "COLLAPSING") && (oSource.tagName != "A"))
      return;

   oSource.style.cursor = "hand";
   oSource.style.color = "red";
}

function doMouseOut()
{
   oSource = event.srcElement;
   if ((oSource.className != "COLLAPSING") && (oSource.tagName != "A"))
      return;
 
   oSource.style.cursor = "";
   oSource.style.color = "black"; 
}
</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF"
      onload="init()"
      onmouseover="doMouseOver()"
      onmouseout="doMouseOut()"
      onclick="expandCollapse()" >

:
<FONT SIZE=1 FACE="Verdana,Arial,Helvetica">
<UL>
   <LI CLASS="COLLAPSING" CHILD="Topics1">HTML Authoring</LI>
   <UL ID="Topics1">
      <LI><A HREF="/workshop/author/default.asp">Beginner's Guide</A></LI>
      <LI><A HREF="/workshop/author/default.asp">IE4.0 Authoring Tips</A></LI>
      <LI><A HREF="/workshop/author/default.asp">HTML Coding Tips</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Table Cell Backgrounds</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Drop Caps</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Quote Server</A></LI>
      <LI><A HREF="/workshop/author/default.asp">HTML Wizard</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Dr. HTML</A></LI>
      <LI><A HREF="/workshop/author/default.asp">HTML Coding FAQ for Internet Explorer</A></LI>
      <LI><A HREF="/workshop/author/default.asp">SGML DTD for Internet Explorer 3.0 Markup</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Authoring Basics</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Authoring Effective Pages</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Designing Efficient Pages</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Using Frames</A></LI>
   </UL>
   <LI><A HREF="/workshop/author/default.asp">HTML Help Authoring</A></LI>
   <LI CLASS="COLLAPSING" CHILD="Topics2">HTML References</LI>
   <UL ID="Topics2">
      <LI><A HREF="/workshop/author/default.htm">Elements</A></LI>
      <LI><A HREF="/workshop/author/default.htm">Character Sets</A></LI>
   </UL>
   <LI CLASS="COLLAPSING" CHILD="Topics3">HTML Applications (HTA)</LI>
   <UL ID="Topics3">
      <LI><A HREF="/workshop/author/default.htm">Overview</A></LI>
      <LI><A HREF="/workshop/author/default.htm">Reference</A></LI>
   </UL>   
</UL>

</FONT>
</BODY>

This feature requires Internet Explorer 4.0 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

For Internet Explorer 5 and later, using DHTML behaviors

Using DHTML behaviors, the code to implement the same table of contents looks a lot cleaner, as most of the script is isolated into a separate file.

<HEAD>
<STYLE>
   .collapsingAndHiliting {behavior:url(ul.htc, url(hilite.htc))} 
   A           {behavior:url(hilite.htc)}
</STYLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

:
<FONT SIZE=1 FACE="Verdana,Arial,Helvetica">

<UL>
   <LI CLASS="CollapsingAndHiliting" CHILD="Topics1">HTML Authoring</LI>
   <UL ID="Topics1">
      <LI><A HREF="/workshop/author/default.asp">Beginner's Guide</A></LI>
      <LI><A HREF="/workshop/author/default.asp">IE4.0 Authoring Tips</A></LI>
      <LI><A HREF="/workshop/author/default.asp">HTML Coding Tips</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Table Cell Backgrounds</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Drop Caps</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Quote Server</A></LI>
      <LI><A HREF="/workshop/author/default.asp">HTML Wizard</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Dr. HTML</A></LI>
      <LI><A HREF="/workshop/author/default.asp">HTML Coding FAQ for Internet Explorer</A></LI>
      <LI><A HREF="/workshop/author/default.asp">SGML DTD for Internet Explorer 3.0 Markup</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Authoring Basics</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Authoring Effective Pages</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Designing Efficient Pages</A></LI>
      <LI><A HREF="/workshop/author/default.asp">Using Frames</A></LI>
   </UL>
   <LI><A HREF="/workshop/author/default.asp">HTML Help Authoring</A></LI>
   <LI CLASS="CollapsingAndHiliting" CHILD="Topics2">HTML References</LI>
   <UL ID="Topics2">
      <LI><A HREF="/workshop/author/default.htm">Elements</A></LI>
      <LI><A HREF="/workshop/author/default.htm">Character Sets</A></LI>
   </UL>
   <LI CLASS="CollapsingAndHiliting" CHILD="Topics3">HTML Applications (HTA)</LI>
   <UL ID="Topics3">
      <LI><A HREF="/workshop/author/default.htm">Overview</A></LI>
      <LI><A HREF="/workshop/author/default.htm">Reference</A></LI>
   </UL>   
</UL>
</FONT>
</BODY>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

Involves Easy-to-Create, Lightweight Components

HTC provides the quickest and easiest way to create DHTML behaviors using scripting languages such as Visual Basic® Scripting Edition (VBScript) and JScript®. Like any component used on the Internet today, however, behaviors can also be created using C++.

The behavior used in the previous example to implement the mouseover highlight effect was implemented as an HTC and involves just a few lines of code. The code consists mainly of script, with a number of XML tags used to define the behavior. Notice the use of the ATTACH element that allows an HTC to listen in on events fired on the element on the page and to handle the events appropriately. This provides the means to encapsulate the event handling code that would otherwise be put on the page.

<PUBLIC:ATTACH EVENT="onmouseover" HANDLER="Hilite" />
<PUBLIC:ATTACH EVENT="onmouseout"  HANDLER="Restore" />
<SCRIPT LANGUAGE="JScript">
var normalColor;

function Hilite()
{
   if (event.srcElement == element)
   { 
     normalColor = style.color;  
     element.style.color  = "red";
     element.style.cursor = "hand";
   }
}

function Restore()
{
   if (event.srcElement == element)
   {
      element.style.color  = normalColor;
      element.style.cursor = "";
   }
}

</SCRIPT>

For more information on HTCs and implementing behaviors in both script and C++, refer to the links provided in Related Topics.

Default Behaviors in Internet Explorer

Internet Explorer 5 introduced a number of default behaviors as part of the browser. A complete listing of these default behaviors is available in the Default Behaviors Reference.

One such default behavior, saveFavorite, allows the current state of a page to be saved when it is added to the user's Favorites list.

For example, the following code demonstrates how the saveFavorite behavior can be used to persist information on a page after saving the page as a favorite. Note how the proposed CSS behavior attribute in the STYLE block specifies that the behavior is implemented internally by the browser.

<HTML>
<HEAD>
<STYLE>
   .saveFavorite {behavior:url(#default#savefavorite);}
</STYLE>
<SCRIPT>
function fnSaveThis(){
   oPersistForm.oPersistText.setAttribute("sPersistText",oPersistForm.oPersistText.value);
}

function fnLoadThis(){
   oPersistForm.oPersistText.value=oPersistForm.oPersistText.getAttribute("sPersistText");
}
</SCRIPT>
</HEAD>
<BODY>
<form name="oPersistForm">
<table class="swtable">
<tr>
   <td>Enter some text:</td>
   <td><input id=oPersistText class=saveFavorite onsave="fnSaveThis()" onload="fnLoadThis()"></td>
</tr>
</table>
</form>
</BODY>
</HTML>

This feature requires Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.

For more information on persistence introduced in Internet Explorer 5, refer to the Persistence Overview.

Compatibility

Behaviors are being introduced in Internet Explorer 5, and are not supported in earlier versions of the browser. If either an earlier version of Internet Explorer, or a non-Internet Explorer browser, encounters a reference to a behavior, the style will be ignored, and the element will be rendered as normal on the page. However, in cases where the behavior being used exposes properties, methods, or events, scripting errors may come up. These errors will need to be handled appropriately, using some version-checking code.

Security

Behaviors are subject to the cross-frame security rules of Internet Explorer. In other words, a Web page that refers to a behavior located on another server in another domain results in an "access denied" error in the page's onerror event handler. In the same way, a Web page that refers to a behavior of a different security protocol than the referring page will result in the same error. For example, a Web page on http://server1/page.htm may not refer to a behavior on https://server1/hilite.htc.