Inside Technique : A-B-C-DHTML Behaviors : Introducing Behaviors

The first tag that we need to have will be the <PUBLIC:COMPONENT> tag. The PUBLIC corresponds to the namespace and the COMPONENT corresponds to the tag within the PUBLIC namespace. The PUBLIC namespace is used to define the aspects of your component that are public. The COMPONENT tag encloses your entire behavior.

Next, you need to define the properties, methods, and events that make up your behavior. Properties are defined using the <PUBLIC:PROPERTY> tag and methods are defined using the <PUBLIC:METHOD> tag. How you define events depends upon whether you are creating a custom event or you want to attach and respond to a built-in event. Custom events are defined similar to properties and methods using the <PUBLIC:EVENT>, while built-in events need to be attached to your behavior using the <PUBLIC:ATTACH> tag. This creates the following structure for defining a behavior:

<PUBLIC:COMPONENT>
  <PUBLIC:PROPERTY NAME="txtChange"/>
  <PUBLIC:METHOD NAME="change"/>
  <PUBLIC:EVENT NAME="onTextChange" ID="tcID"/>
  <PUBLIC:ATTACH EVENT="onclick" ONEVENT="doClick"/>

  <SCRIPT LANGUAGE="JavaScript">
    function change() {
      
    }

    function doClick() {
      
    }
  </SCRIPT>
</PUBLIC:COMPONENT>

One thing before we continue, in a traditional <script> tag contained in your HTML page, the default entity is the 'window' collection, therefore, writing abc = 123 is the same as window.abc = 123. In a behavior, the default entity is the element on which the behavior is attached, therefore, writing abc = 123 is the same as element.abc = 123. So, when I say we are going to use the attachEvent method, I really mean the element.attachEvent method, which makes more sense. The syntax is this:

entity.attachEvent("event", function)

Here, event is an event that will be fired on the entity object and function is the function name in the DHTML Behavior to call. Some of you may be wondering why not just use the JavaScript event handling of entity.event = function;. The reason is that with that syntax, the function replaces any other handler of that event, but with the attachEvent, the function is added in addition to any preexisting handlers. So, after all that mumbo-jumbo, we have two new lines of code: attachEvent("onmouseover", change); and attachEvent("onmouseout", change); (Notices that 'change' was defined as a method, all of your function do not need to be defined as such, just the ones you want outside entities to be able to call). Now we need to make the change function. The idea will be this, it will take the current innerText, save that, take the txtChange property and set the innerText equal to that, then take the old innerText and set the txtChange property equal to that. This way, we need only one function to handle the text switch both ways. Here is the code:

oldText = element.innerText;            
element.innerText = txtChange;          
txtChange = oldText;                    

Done, simple, easy. Realize that any place I put in a 'element.', I could have left blank, similarly I could have put a 'element.' in front of any of my variables. There's one thing (well there's a lot) that we haven't covered. How do you set the initial property of txtChange? This is probably the most complicated and hardest part (not), simply set it as a property of the element like any other property. Example:

<div id=behDemo 
       style="cursor: hand; behavior: url(txtChange.htc)" 
       txtChange="Way to go!">
  Did I mention that DHTML Behaviors end in .htc
</div>

Now there is some more stuff we talked about, namely, firing the 'onTextChange' event. This is very easy, use the fire method on the custom event. The syntax is:

eventID.fire(eventData)

What is eventData? Well this is any extra information you want to be available to someone handling the event, and it made available through the 'event' object (remember event.scrElement, same deal). So lets say we wanted have an event expose the current text (using a variable curText), we would first have to create an 'EventObject', then assign 'curText' the element's innerText, finally, we would have to fire the event. Here is the code:

  function doMethod() {
    var eventData = createEventObject()
    eventData .curText = element.innerText
    tcID.fire(eventData)
  }

To handle this event, someone could append this property to our div above: onTextChange="alert(event.curText)" One last thing, since we exposed change as a method, anything can call it using behDemo.change(). That's it. Here is the complete code:

<div id=behDemo 
     style="cursor: hand; behavior: url(txtChange.htc)" 
     txtChange="Way to go!" 
     onTextChange="alert(event.curText)">
  Did I mention that DHTML Behaviors end in .htc
</div>

---txtChange.htc---

<PUBLIC:COMPONENT>
<PUBLIC:EVENT NAME="onTextChange" ID="tcID"/>
<PUBLIC:PROPERTY name="txtChange"/>
<PUBLIC:METHOD name="change"/> 
<SCRIPT>
attachEvent("onmouseover", change); 
attachEvent("onmouseout", change);  
function change() {                 
  oldText = element.innerText;        
  element.innerText = txtChange;       
  txtChange = oldText;                  
  eventData = createEventObject();
  eventData.curText = element.innerText; 
  tcID.fire(eventData)
}                                                                       
</SCRIPT>
</PUBLIC:COMPONENT>

Steve Gore is a regular contributor to www.InsideDHTML.com and is the author of our very popular library of DHTML functions. You can also find Steve's work at his personal web-site, www.creek.net/~ender7.

© 1997-2000 InsideDHTML.com, LLC. All rights reserved.