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.

See Also

DHTML Behaviors, Implementing DHTML Behaviors in Script