Internet Explorer 5.0 Preview, Part I: Sharing a Behavior - Doc JavaScript

Sharing a Behavior

So far we have shown how to define a Behavior and associate it with one DHTML element. But the real power of Behaviors is that a single Behavior can be shared by several DHTML elements. By assigning different values to the scriptlet's properties, slightly different behaviors can be achieved. Here is our single Blinking Soccer:

<DIV CLASS="soccer" x="200" y="250" onFifthBlink = -->
  "alert('Fifth Blink Point')"><IMG SRC="soccer.gif"></DIV> 

Now, let's add five more soccer balls, in different window's locations. The DIV line stays the same, except that the x and y attributes on each DIV are assigned different values:

<DIV CLASS="soccer" x="50" y="100" onFifthBlink = -->
  "alert('Fifth Blink Point')"><IMG SRC="soccer.gif"></DIV>
<DIV CLASS="soccer" x="100" y="150" onFifthBlink = -->
  "alert('Fifth Blink Point')"><IMG SRC="soccer.gif"></DIV>
<DIV CLASS="soccer" x="150" y="200" onFifthBlink = -->
  "alert('Fifth Blink Point')"><IMG SRC="soccer.gif"></DIV>
<DIV CLASS="soccer" x="200" y="250" onFifthBlink = -->
  "alert('Fifth Blink Point')"><IMG SRC="soccer.gif"></DIV>
<DIV CLASS="soccer" x="250" y="300" onFifthBlink = -->
  "alert('Fifth Blink Point')"><IMG SRC="soccer.gif"></DIV>

As we explain in the next page, sharing a single module by several elements is one of the cornerstones of any object oriented languages. It is more than calling a procedure with different arguments. Object oriented modules encapsulate both data and methods that can operate on this data. Behaviors are exactly that.