ATTACH Element

DHTML, HTML, & CSS

 
Click to return to the Component Development home page    
COMPONENT Element     HTC Reference    

ATTACH Element


Binds a function to an event, so that the function is called whenever the event fires on the specified object.

Syntax

<PUBLIC:ATTACH
    EVENT = sEvent
    FOR = document | element | window
    ONEVENT = sEventHandler
    ID = sID
/>

Attributes

EVENT
Required. String that specifies the name of a Dynamic HTML (DHTML) event, or any of the events specific to the HTML Component (HTC) that are listed in the HTC Reference.
FOR
Optional. String that specifies one of the following values to identify the source of the event.
document Refers to the document object.
element Default. Refers to the element to which the behavior is attached.
window Refers to the window object.
ONEVENT
Required. String that specifies an inline script or a direct invocation of the event handler function.
ID
Optional. String that uniquely identifies the ATTACH element within the component. This attribute is analogous to the ID attribute in DHTML.

Element Information

Number of occurrences Any number
Parent elements COMPONENT
Child elements None
Requires closing tag No

Remarks

The ATTACH element is a declarative form of the attachEvent method.

When the specified event fires on the element to which the behavior is attached, the element's event handler is called first, before the behavior's. If multiple behaviors are attached to an element and multiple event handlers are defined for the same event on the same element, the functions are called in random order, immediately after the element's event handler is called.

Example

This example uses an HTC to implement a table of contents that expands and collapses. The HTC attaches to the element's onclick event, and then expands or collapses the list each time the onclick event is received.

Sample Code

<PUBLIC:PROPERTY NAME="child" />
<PUBLIC:ATTACH EVENT="onclick" ONEVENT="ExpandCollapse()" />


<SCRIPT LANGUAGE="JScript">
function ExpandCollapse()
{
   var i;
   var sDisplay;

   // Determine current state of the list (expanded or collapsed)
   // based on the current display property of the child.
   bCollapsed = (element.document.all(child).style.display == "none");
   
   if (bCollapsed)
   {
      style.listStyleImage = "url('/workshop/graphics/blueminus.gif')";
      element.document.all(child).style.display = "";
   }
   else
   {
      style.listStyleImage = "url('/workshop/graphics/blueplus.gif')";
      element.document.all(child).style.display = "none";
   }
}
</SCRIPT>
This feature requires Microsoft® Internet Explorer 5 or later. Click the icon below to install the latest version. Then reload this page to view the sample.
Microsoft Internet Explorer

See Also

dhtml behaviorsInternet Link, implementing dhtml behaviors in scriptInternet Link

Back to topBack to top

Did you find this topic useful? Suggestions for other topics? write us!Internet Link

© 1999 microsoft corporation. all rights reserved. terms of useInternet Link.