Internet Explorer 5.0, Part II: Behavior Handler's createEventObject Method

Behavior Handler's createEventObject Method

Adobe's Flash 10.1 Goes Mobile (Minus iPhone)

The only way to communicate data back to the host document is via an event object. You can create this event object inside the scriptlet with the createEventObject() method. The syntax is as follows:

BehaviorID.createEventObject

If BehaviorID prefix is omitted, the default behavior (as specified in the Behavior-type Implements statement) is used. You communicate the name of the event object by firing it along with the event name, as explained in next page. The mirror object, back at the host document, is window.event. All object's properties can be accessed by the names they were originally set by in the scriptlet.

Let's identify the places in our scriptlet where we invoke the createEventObject() method:

<SCRIPTLET ID="xmixdrix">

<IMPLEMENTS ID="kuku" TYPE="Behavior" DEFAULT>
<EVENT NAME="onBoxLoad"/>
<EVENT NAME="onBoxClick"/>
</IMPLEMENTS>

<IMPLEMENTS TYPE="Automation">
<PROPERTY NAME="x"/>
<PROPERTY NAME="y"/>
</IMPLEMENTS>

<SCRIPT LANGUAGE="JavaScript">
style.position = "absolute";
style.pixelTop = y;
style.pixelLeft = x;
src = "ibutton.bmp";
window.lastPlayedBy = "o";

window.attachEvent("onload", onload);
attachEvent("onclick", onclick);

function onclick() {
  if (src.indexOf("ibutton.bmp") < 0) return;  
  clickEvent = createEventObject();
  clickEvent.id = uniqueID;
  if (window.lastPlayedBy == "o") {
    src = "xbutton.bmp";
    window.lastPlayedBy = "x";
    clickEvent.playedBy = "x";
  }
  else {  // lastPlayedBy = "x"
    src = "obutton.bmp";
    window.lastPlayedBy = "o";
    clickEvent.playedBy = "o";
  }
  fireEvent("onBoxClick", clickEvent);
}

function onload() {
  loadEvent = createEventObject();
  loadEvent.id = uniqueID;
  fireEvent("onBoxLoad",loadEvent);
}

</SCRIPT>
</SCRIPTLET>

We first invoke the createEventObject() method inside the onclick() function to create the clickEvent object. Then, we set two properties. The id property stores the ID of the element associated with the behavior:

clickEvent.id = uniqueID;

The playedBy property stores the shape of the piece last placed on the game board ("o" or "x"):

clickEvent.playedBy = "x";

and

clickEvent.playedBy = "o";

Similarly, to create the loadEvent object, we invoke the createEventObject() method inside the onload() function. We then set the id property which stores the ID of the element associated with the behavior.

We read the information off the window.event object inside the host document. Let's identify the places in the host document where we read the information set by the scriptlet:

<HTML>
<HEAD>
<STYLE>  
  .tripleBox{behavior:url(xmdbehavior.sct)} 
</STYLE>
<SCRIPT LANGUAGE="JavaScript">

var grid = new Array();
grid[1] = new Array();
grid[2] = new Array();
grid[3] = new Array();

function createBoxObject(event) {
  this.id = event.id;
  this.playedBy = "";
}

function rowComplete() {
  var lastPlayedBy = grid[1][1].playedBy;
  if ((lastPlayedBy != "") &&
      (grid[2][1].playedBy == lastPlayedBy) &&
      (grid[3][1].playedBy == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][2].playedBy;
  if ((lastPlayedBy != "") && 
      (grid[2][2].playedBy == lastPlayedBy) &&
      (grid[3][2].playedBy == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][3].playedBy;
  if ((lastPlayedBy != "") && 
      (grid[2][3].playedBy == lastPlayedBy) &&
      (grid[3][3].playedBy == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][1].playedBy;
  if ((lastPlayedBy != "") && 
      (grid[1][2].playedBy == lastPlayedBy) &&
      (grid[1][3].playedBy == lastPlayedBy)) return(true);
  lastPlayedBy = grid[2][1].playedBy;
  if ((lastPlayedBy != "") && 
      (grid[2][2].playedBy == lastPlayedBy) &&
      (grid[2][3].playedBy == lastPlayedBy)) return(true);
  lastPlayedBy = grid[3][1].playedBy;
  if ((lastPlayedBy != "") && 
      (grid[3][2].playedBy == lastPlayedBy) &&
      (grid[3][3].playedBy == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][1].playedBy;
  if ((lastPlayedBy != "") && 
      (grid[2][2].playedBy == lastPlayedBy) &&
      (grid[3][3].playedBy == lastPlayedBy)) return(true);
  lastPlayedBy = grid[1][3].playedBy;
  if ((lastPlayedBy != "") && 
      (grid[2][2].playedBy == lastPlayedBy) &&
      (grid[3][1].playedBy == lastPlayedBy)) return(true);
}
function handleBoxClick() {
  for (var i = 1; i <= 3; i++)
    for (var j = 1; j <=3; j++)
      if (grid[i][j].id == window.event.id) {
        iIndex = i;
        jIndex = j;
        var lastPlayedBy = window.event.playedBy;
      }
 
  grid[iIndex][jIndex].playedBy = window.event.playedBy;
  if (rowComplete()) {
    alert("The " + lastPlayedBy + " wins");
    window.location.reload();
  }
}

function handleBoxLoad(i,j) {
  grid[i][j] = new createBoxObject(window.event);
}

</SCRIPT>
</HEAD>
<BODY>
<IMG CLASS="tripleBox" x="50" y="50" onBoxClick="handleBoxClick()" 
onBoxLoad="handleBoxLoad(1,1)"> 
<IMG CLASS="tripleBox" x="150" y="50" onBoxClick="handleBoxClick()" 
onBoxLoad="handleBoxLoad(2,1)"> 
<IMG CLASS="tripleBox" x="250" y="50" onBoxClick="handleBoxClick()" 
onBoxLoad="handleBoxLoad(3,1)"> 
<IMG CLASS="tripleBox" x="50" y="150" onBoxClick="handleBoxClick()" 
onBoxLoad="handleBoxLoad(1,2)"> 
<IMG CLASS="tripleBox" x="150" y="150" onBoxClick="handleBoxClick()" 
onBoxLoad="handleBoxLoad(2,2)"> 
<IMG CLASS="tripleBox" x="250" y="150" onBoxClick="handleBoxClick()" 
onBoxLoad="handleBoxLoad(3,2)"> 
<IMG CLASS="tripleBox" x="50" y="250" onBoxClick="handleBoxClick()" 
onBoxLoad="handleBoxLoad(1,3)"> 
<IMG CLASS="tripleBox" x="150" y="250" onBoxClick="handleBoxClick()" 
onBoxLoad="handleBoxLoad(2,3)"> 
<IMG CLASS="tripleBox" x="250" y="250" onBoxClick="handleBoxClick()" 
onBoxLoad="handleBoxLoad(3,3)">
</BODY>
</HTML>

As you can see, we read the id and the playedBy properties in the handleClickEvent() method, and just the id property inside the handleLoadEvent() method.