DOM-2 events

• Ideally you should not be able to catch the small circle .. of course you will.
• When testing this example with NN, window.alert will cause problems.
• You might say: Well what's the difference to the old events? Currently all I can say, it's a clean object-oriented solution. This example can equally simple be implemented using the old-style events.

dom2evts.svg

<?xml version="1.0"?> 
<svg width="400" height="300" onload="OnLoadEvent(evt)">
   <circle id="big"   style="fill:none;stroke:black;stroke-width:10" cx="200" cy="150" r="100" /> 
   <circle id="small" style="fill:gray;stroke:black;" cx="200" cy="150" r="10" /> 
<script><![CDATA[
// === the svg elements ======================================
var big = null, small = null;  // .. the circles ..

// === event handling ========================================
function OnLoadEvent(event) 
{
   var svgDoc = event.getTarget().getOwnerDocument();
   big   = svgDoc.getElementById("big");
   small = svgDoc.getElementById("small");
   big.addEventListener("mouseover", BigTouched, false);
   small.addEventListener("mouseover", SmallTouched, false);
}
// -----------------------------------------------------------
function BigTouched(event)
{
   if (small.getAttribute("cx") == "200" && small.getAttribute("cy") == "150") // .. centered ..
   {
      var angle = Math.random()*2*Math.PI;
      small.setAttribute("cx", 200 + 125*Math.cos(angle));
      small.setAttribute("cy", 150 + 125*Math.sin(angle));
   }
   else
   {
      small.setAttribute("cx", 200);
      small.setAttribute("cy", 150);
   }
}
// -----------------------------------------------------------
function SmallTouched(event)
{
   window.alert("ouch !");
}
]]></script> 
</svg>
  

© 2000 MecXpert