<script type="text/ecmascript"><![CDATA[

    function init(evt) {
        if ( window.svgDocument == null )
            svgDocument = evt.target.ownerDocument;
    }

    var click       = 0;
    var mouseDown   = 0;
    var mouseUp     = 0;
    var mouseOver   = 0;
    var mouseMove   = 0;
    var mouseOut    = 0;
    
    function updateStats() {
        svgDocument.getElementById("clicks").firstChild.data = "onclick = " + click;
        svgDocument.getElementById("mousedowns").firstChild.data = "onmousedown = " + mouseDown;
        svgDocument.getElementById("mouseups").firstChild.data = "onmouseup = " + mouseUp;
        svgDocument.getElementById("mouseovers").firstChild.data = "onmouseover = " + mouseOver;
        svgDocument.getElementById("mousemoves").firstChild.data = "onmousemove = " + mouseMove;
        svgDocument.getElementById("mouseouts").firstChild.data = "onmouseout = " + mouseOut;
    }
    
    function msClick (evt) {
        click++;
        updateStats();
    }

    function msDown (evt) {
        mouseDown++;
        updateStats();
    }
    
    function msUp (evt) {
        mouseUp++;
        updateStats();
    }
    
    function msOver (evt) {
        mouseOver++;
        updateStats();
    }
    
    function msMove (evt) {
        mouseMove++;
        updateStats();
    }

    function msOut (evt) {
        mouseOut++;
        updateStats();
    }

    ]]></script>
 
 <!-- Pattern Definition -->
 <defs>
  <pattern id="checkerPattern" patternUnits="userSpaceOnUse"
    x="0" y="0" width="10" height="10"
    viewBox="0 0 10 10" >
    
   <rect x="0" y="0" width="5" height="5" fill="lightblue" />
   <rect x="5" y="5" width="5" height="5" fill="lightblue" />
  </pattern>
 </defs>

 <!-- Background -->
 <rect x="0" y="0" width="100%" height="100%" fill="url(#checkerPattern)" />

 <!-- Javascript Example -->

    <circle cx="50%" cy="25%" r="40" fill="lightyellow" stroke-width="1" stroke="black"
        onclick="msClick()"
        onmousedown="msDown()"
        onmouseup="msUp()"
        onmouseover="msOver()"
        onmousemove="msMove()"
        onmouseout="msOut()"
        />

    <rect x="5" y="95" width="120" height="95" fill="white" stroke="grey" stroke-width="2" rx="10" ry="10" opacity="0.5" />

    <text x="10" y="110" id="clicks">onclick = 0</text>
    <text x="10" y="125" id="mousedowns">onmousedown = 0</text>
    <text x="10" y="140" id="mouseups">onmouseup = 0</text>
    <text x="10" y="155" id="mouseovers">onmouseover = 0</text>
    <text x="10" y="170" id="mousemoves">onmousemove = 0</text>
    <text x="10" y="185" id="mouseouts">onmouseout = 0</text>    

</svg>