Introduction to DHTML Behaviors

Article
10/23/2013

This topic documents a feature of Binary Behaviors, which are obsolete as of Internet Explorer 10.

One of the most exciting new features introduced in Microsoft Internet Explorer 5.5 is Dynamic HTML (DHTML) behaviors. DHTML behaviors are 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 Windows 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 Sheets (CSS) behavior attribute.

The DHTML behavior capabilities have been significantly enhanced with the release of Internet Explorer 5.5, including a new type of behavior called an element behavior. Since there are now two main types of DHTML behaviors, the original behaviors introduced in Internet Explorer 5 are now called attached behaviors. Therefore, the discussion of behaviors in this article refers primarily to attached behaviors. For more information on the behaviors capabilities in Internet Explorer 5.5, see About Element Behaviors and Introduction to Viewlink.

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 might arise when using behaviors, and, finally, provides links to related topics.

Benefits
- Behaviors Provide a Means for Script Encapsulation and Code Reuse
- Behaviors Empower Designers to Add Interactive Effects with a Simple Declarative Syntax
- Behaviors Isolate Script from Content, Resulting in Cleaner, More Manageable Pages
- Behaviors Involve Easy-to-Create Components
Default Behaviors in Internet Explorer
Compatibility
Security
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 developers. Content authors are responsible for writing content. Designers determine what interactive effects can be added to the content, while developers implement those effects.

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

Behaviors Provide a Means for Script Encapsulation and Code Reuse
Behaviors Empower Designers to Add Interactive Effects with a Simple Declarative Syntax
Behaviors Isolate Script from Content, Resulting in Cleaner, More Manageable Pages
Behaviors Involve Easy-to-Create Components

Behaviors Provide 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: onmouseover 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 onmouseover 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>

Code example: https://samples.msdn.microsoft.com/workshop/samples/author/behaviors/hilite1.htm

Beginning with Internet Explorer 5, 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) file, which is contained in the hilite.htc file, to achieve the onmouseover 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>

Code example: https://samples.msdn.microsoft.com/workshop/samples/author/behaviors/hilite2.htm

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.

Behaviors Empower 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 developer 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 developer to achieve the same effect on the page, usually with Dynamic HTML.

With behaviors, a developer 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 an onmouseover highlighting effect on a list item is as easy as adding the familiar style block, in exactly the same way a style is attached to an element through CSS.

Behaviors Isolate 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, onmouseover 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.

<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/minus.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/minus.gif)'
   }
   else
   {
     oChild.style.display='none';
     event.srcElement.style.listStyleImage='url(/workshop/graphics/plus.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>

Code example: https://samples.msdn.microsoft.com/workshop/samples/components/htc/toc/toc-ie4.htm

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>

Code example: https://samples.msdn.microsoft.com/workshop/samples/components/htc/toc/toc.htm

Behaviors Involve Easy-to-Create Components

HTC files provide the quickest and easiest way to create DHTML behaviors using scripting languages such as Microsoft Visual Basic Scripting Edition (VBScript) and Microsoft JScript (compatible with ECMA 262 language specification). However, like any component used on the Internet today, behaviors can be implemented using Windows Script Component (WSC) or Microsoft Visual C++.

The behavior used in the previous example to implement the onmouseover 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 custom elements used to define the behavior. Notice the use of the PUBLIC: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" ONEVENT="Hilite()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="Restore()" />
<SCRIPT LANGUAGE="JScript">
var normalColor;

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

function Restore()
{
   if (event.srcElement == element)
   {
      runtimeStyle.color  = normalColor;
      runtimeStyle.cursor = "";
   }
}
</SCRIPT>

For more information on HTC files and implementing behaviors in both script and Visual C++, see the links provided in Related Topics.

Default Behaviors in Internet Explorer

Internet Explorer 5 introduced a number of default behaviors that are built into 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>

Code example: https://samples.msdn.microsoft.com/workshop/samples/author/persistence/saveFavorite_1.htm

For more information about persistence introduced in Internet Explorer 5, see Introduction to Persistence.

Compatibility

Microsoft support of DHTML behaviors is limited to systems running Internet Explorer 5 or later. Browsers not supporting DHTML behaviors will ignore the proposed CSS behavior attribute when encountered on the page, causing the element to render as usual but without the behavior being applied. However, scripting errors might result in cases where properties, methods, or events are exposed by the behavior being applied to an element(s) on the page, indicating that the object does not expose the property or method. These errors must be handled appropriately by the page author using some version-checking code.

Security

Behaviors are subject to the About Cross-Frame Scripting and 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 https://server1/page.htm might not refer to a behavior on https://server1/hilite.htc.

Topics related to DHTML behaviors include:

Share via