cleaning up event names, reducing demo cases to just addHandler interface, normalizing event data to express more idiomatic javascript pattern of passing object instead of invoking callback with positional parameters

src/button.js

@@ -141,41 +141,81 @@ $.Button = function( options ) {
         clickTimeThreshold: this.clickTimeThreshold, 
         clickDistThreshold: this.clickDistThreshold,
 
-        enterHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
+        enterHandler: function( tracker, position, buttonDownElement, buttonDownAny, event ) {
             if ( buttonDownElement ) {
                 inTo( _this, $.ButtonState.DOWN );
-                _this.raiseEvent( "onEnter", _this );
+                _this.raiseEvent( "enter", {
+                    button: _this,
+                    tracker: tracker,
+                    position: position,
+                    buttonDownElement: buttonDownElement,
+                    buttonDownAny: buttonDownAny,
+                    originalEvent: event 
+                });
             } else if ( !buttonDownAny ) {
                 inTo( _this, $.ButtonState.HOVER );
             }
         },
 
-        focusHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
+        focusHandler: function( tracker, position, buttonDownElement, buttonDownAny, event ) {
-            this.enterHandler( tracker, position, buttonDownElement, buttonDownAny );
+            this.enterHandler( tracker, position, buttonDownElement, buttonDownAny, event );
-            _this.raiseEvent( "onFocus", _this );
+            _this.raiseEvent( "focus", {
+                button: _this,
+                tracker: tracker,
+                position: position,
+                buttonDownElement: buttonDownElement,
+                buttonDownAny: buttonDownAny,
+                originalEvent: event 
+            });
         },
 
-        exitHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
+        exitHandler: function( tracker, position, buttonDownElement, buttonDownAny, event ) {
             outTo( _this, $.ButtonState.GROUP );
             if ( buttonDownElement ) {
-                _this.raiseEvent( "onExit", _this );
+                _this.raiseEvent( "exit", {
+                    button: _this,
+                    tracker: tracker,
+                    position: position,
+                    buttonDownElement: buttonDownElement,
+                    buttonDownAny: buttonDownAny,
+                    originalEvent: event 
+                });
             }
         },
 
-        blurHandler: function( tracker, position, buttonDownElement, buttonDownAny ) {
+        blurHandler: function( tracker, position, buttonDownElement, buttonDownAny, event ) {
-            this.exitHandler( tracker, position, buttonDownElement, buttonDownAny );
+            this.exitHandler( tracker, position, buttonDownElement, buttonDownAny, event );
-            _this.raiseEvent( "onBlur", _this );
+            _this.raiseEvent( "blur", {
+                button: _this,
+                tracker: tracker,
+                position: position,
+                buttonDownElement: buttonDownElement,
+                buttonDownAny: buttonDownAny,
+                originalEvent: event 
+            });
         },
 
-        pressHandler: function( tracker, position ) {
+        pressHandler: function( tracker, position, event ) {
             inTo( _this, $.ButtonState.DOWN );
-            _this.raiseEvent( "onPress", _this );
+            _this.raiseEvent( "press", {
+                button: _this,
+                tracker: tracker,
+                position: position,
+                originalEvent: event 
+            });
         },
 
-        releaseHandler: function( tracker, position, insideElementPress, insideElementRelease ) {
+        releaseHandler: function( tracker, position, insideElementPress, insideElementRelease, event ) {
             if ( insideElementPress && insideElementRelease ) {
                 outTo( _this, $.ButtonState.HOVER );
-                _this.raiseEvent( "onRelease", _this );
+                _this.raiseEvent( "release", {
+                    button: _this,
+                    tracker: tracker,
+                    position: position,
+                    insideElementPress: insideElementPress,
+                    insideElementRelease: insideElementRelease,
+                    originalEvent: event 
+                });
             } else if ( insideElementPress ) {
                 outTo( _this, $.ButtonState.GROUP );
             } else {
@@ -183,17 +223,28 @@ $.Button = function( options ) {
             }
         },
 
-        clickHandler: function( tracker, position, quick, shift ) {
+        clickHandler: function( tracker, position, quick, shift, event ) {
             if ( quick ) {
-                _this.raiseEvent("onClick", _this);
+                _this.raiseEvent("click", {
+                    button: _this,
+                    tracker: tracker,
+                    position: position,
+                    quick: quick,
+                    shift: shift,
+                    originalEvent: event 
+                });
             }
         },
 
-        keyHandler: function( tracker, key ){
+        keyHandler: function( tracker, key, event ){
             //console.log( "%s : handling key %s!", _this.tooltip, key);
             if( 13 === key ){
-                _this.raiseEvent( "onClick", _this );
+                _this.raiseEvent( "keypress", {
-                _this.raiseEvent( "onRelease", _this );
+                    button: _this,
+                    tracker: tracker,
+                    key: key,
+                    originalEvent: event 
+                });
                 return false;
             }
             return true;

src/viewer.js

@@ -1169,7 +1169,7 @@ function onBlur(){
     
 }
 
-function onCanvasClick( tracker, position, quick, shift ) {
+function onCanvasClick( tracker, position, quick, shift, event ) {
     var zoomPreClick,
         factor;
     if ( this.viewport && quick ) {    // ignore clicks where mouse moved         
@@ -1181,15 +1181,16 @@ function onCanvasClick( tracker, position, quick, shift ) {
         );
         this.viewport.applyConstraints();
     }
-    this.raiseEvent( 'canvas-click', { 
+    this.raiseEvent( 'click', { 
         tracker: tracker,
         position: position,
         quick: quick,
-        shift: shift
+        shift: shift,
+        originalEvent: event 
     });
 }
 
-function onCanvasDrag( tracker, position, delta, shift ) {
+function onCanvasDrag( tracker, position, delta, shift, event ) {
     if ( this.viewport ) {
         if( !this.panHorizontal ){
             delta.x = 0;
@@ -1206,27 +1207,29 @@ function onCanvasDrag( tracker, position, delta, shift ) {
             this.viewport.applyConstraints();
         }
     }
-    this.raiseEvent( 'canvas-click', { 
+    this.raiseEvent( 'drag', { 
         tracker: tracker,
         position: position,
         delta: delta,
-        shift: shift
+        shift: shift,
+        originalEvent: event 
     });
 }
 
-function onCanvasRelease( tracker, position, insideElementPress, insideElementRelease ) {
+function onCanvasRelease( tracker, position, insideElementPress, insideElementRelease, event ) {
     if ( insideElementPress && this.viewport ) {
         this.viewport.applyConstraints();
     }
-    this.raiseEvent( 'canvas-release', { 
+    this.raiseEvent( 'release', { 
         tracker: tracker,
         position: position,
         insideElementPress: insideElementPress,
-        insideElementRelease: insideElementRelease
+        insideElementRelease: insideElementRelease,
+        originalEvent: event 
     });
 }
 
-function onCanvasScroll( tracker, position, scroll, shift ) {
+function onCanvasScroll( tracker, position, scroll, shift, event ) {
     var factor;
     if ( this.viewport ) {
         factor = Math.pow( this.zoomPerScroll, scroll );
@@ -1236,54 +1239,58 @@ function onCanvasScroll( tracker, position, scroll, shift ) {
         );
         this.viewport.applyConstraints();
     }
-    this.raiseEvent( 'canvas-scroll', { 
+    this.raiseEvent( 'scroll', { 
         tracker: tracker,
         position: position,
         scroll: scroll,
-        shift: shift
+        shift: shift,
+        originalEvent: event 
     });
     //cancels event
     return false;
 }
 
-function onContainerExit( tracker, position, buttonDownElement, buttonDownAny ) {
+function onContainerExit( tracker, position, buttonDownElement, buttonDownAny, event ) {
     if ( !buttonDownElement ) {
         THIS[ this.hash ].mouseInside = false;
         if ( !THIS[ this.hash ].animating ) {
             beginControlsAutoHide( this );
         }
     }
-    this.raiseEvent( 'container-exit', { 
+    this.raiseEvent( 'exit', { 
         tracker: tracker,
         position: position,
         buttonDownElement: buttonDownElement,
-        buttonDownAny: buttonDownAny
+        buttonDownAny: buttonDownAny,
+        originalEvent: event 
     });
 }
 
-function onContainerRelease( tracker, position, insideElementPress, insideElementRelease ) {
+function onContainerRelease( tracker, position, insideElementPress, insideElementRelease, event ) {
     if ( !insideElementRelease ) {
         THIS[ this.hash ].mouseInside = false;
         if ( !THIS[ this.hash ].animating ) {
             beginControlsAutoHide( this );
         }
     }
-    this.raiseEvent( 'container-release', { 
+    this.raiseEvent( 'release', { 
         tracker: tracker,
         position: position,
         insideElementPress: insideElementPress,
-        insideElementRelease: insideElementRelease
+        insideElementRelease: insideElementRelease,
+        originalEvent: event 
     });
 }
 
-function onContainerEnter( tracker, position, buttonDownElement, buttonDownAny ) {
+function onContainerEnter( tracker, position, buttonDownElement, buttonDownAny, event ) {
     THIS[ this.hash ].mouseInside = true;
     abortControlsAutoHide( this );
-    this.raiseEvent( 'container-enter', { 
+    this.raiseEvent( 'enter', { 
         tracker: tracker,
         position: position,
         buttonDownElement: buttonDownElement,
-        buttonDownAny: buttonDownAny
+        buttonDownAny: buttonDownAny,
+        originalEvent: event 
     });
 }
 

test/demo.html

@@ -5,290 +5,174 @@
     <style type="text/css">
       .openseadragon
       {
-	  width:      800px;
+      width:      800px;
-	  height:     600px;
+      height:     600px;
-	  border:     1px solid black;
+      border:     1px solid black;
-	  color:      #333; /* text color for messages */
+      color:      #333; /* text color for messages */
-	  background-color: black;
+      background-color: black;
       }
       .openseadragon-small
       {
-	  width:      40px;
+      width:      40px;
-	  height:     30px;
+      height:     30px;
-	  border:     1px solid black;
+      border:     1px solid black;
-	  color:      #333; /* text color for messages */
+      color:      #333; /* text color for messages */
-	  background-color: black;
+      background-color: black;
       }
       
     </style>
 </head>
 <body>
     <div class="demoarea">
-	<div>
+    <div>
-	   Simple demo page to verify that event handlers pass along the original source event
+       Simple demo page to verify that event handlers pass along the original source event
-	</div>
+    </div>
-	<div id="contentDiv" class="openseadragon"></div>
+    <div id="contentDiv" class="openseadragon"></div>
-	<div>
+    <div>
-	    <span id='consolelog'></span>
+        <span id='consolelog'></span>
-	</div>
+    </div>
     </div>
 
     <script type="text/javascript">
     var viewer = OpenSeadragon({
-	id:"contentDiv",
+        id:"contentDiv",
-	prefixUrl:"openseadragon/build/openseadragon/images/",
+        prefixUrl:"openseadragon/build/openseadragon/images/",
         tileSources:{
              Image:{
-		xmlns:"http://schemas.microsoft.com/deepzoom/2008",
+                xmlns:"http://schemas.microsoft.com/deepzoom/2008",
-		Url:"example-images/highsmith/highsmith_files/",
+                Url:"example-images/highsmith/highsmith_files/",
-		Format:"jpg",
+                Format:"jpg",
-		Overlap:"2",
+                Overlap:"2",
-		TileSize:"256",
+                TileSize:"256",
-		Size:{  
+                Size:{  
-		    Height:"9221",
+                    Height:"9221",
-	            Width:"7026"
+                    Width:"7026"
-	        }
+                }
             }
-	}
+        }
     });
 
     var demoMessageLog = "";
     var screenConsole = document.getElementById('consolelog');
     
-    function checkIfEventWasPassed(event)
+    function checkIfEventWasPassed(event){
-    {
+        if(typeof event === 'undefined'){
-        if(typeof event === 'undefined')
+            demoMessageLog += "PROBLEM EVENT WAS UNDEFINED:" + event + "\n\n";          
-        {
- 	    demoMessageLog += "PROBLEM EVENT WAS UNDEFINED:" + event + "\n\n";        	
         }
     }
 
-    function updateDebugMessageOnScreenConsole()
+    function logMessage(){
-    {
         screenConsole.innerHTML = demoMessageLog.replace(/\n/g, '<br />');
     }
 
-    viewer.innerTracker.clickHandler = function(tracker, position, delta, shift,event)
-    {
- 	demoMessageLog += "Altered version of original clickHandler\n" +
-	"    tracker:" + tracker + "\n" +
-	"    position:" + position + "\n" +
-	"    delta:" + delta + "\n" +
-	"    shift:" + shift + "\n" +
-	"    event:" + event + "\n\n";
-	checkIfEventWasPassed(event);
-	updateDebugMessageOnScreenConsole();
     
-    }
+    viewer.addHandler("click",  function( event ){
-    
+        demoMessageLog += "Additional clickHandler\n" +
-    viewer.addHandler("click",  function(tracker, position, delta, shift,event)
+        "    tracker:" + event.tracker + "\n" +
-    {
+        "    position:" + event.position + "\n" +
-      demoMessageLog += "Additional clickHandler\n" +
+        "    delta:" + event.delta + "\n" +
-	  "    tracker:" + tracker + "\n" +
+        "    shift:" + event.shift + "\n" +
-	  "    position:" + position + "\n" +
+        "    originalEvent:" + event.originalEvent + "\n\n";
-	  "    delta:" + delta + "\n" +
+        checkIfEventWasPassed( event.originalEvent );
-	  "    shift:" + shift + "\n" +
+        logMessage();
-	  "    event:" + event + "\n\n";
-      checkIfEventWasPassed(event);
-      updateDebugMessageOnScreenConsole();
-     });
-
-    viewer.innerTracker.pressHandler = function(tracker, position, event)
-    {
-	demoMessageLog += "Altered version of original pressHandler\n" +
-	"    tracker:" + tracker + "\n" +
-	"    position:" + position + "\n" +
-	"    event:" + event + "\n\n";
-	checkIfEventWasPassed(event);
-	updateDebugMessageOnScreenConsole();
-    };
-    viewer.addHandler("press",  function(tracker, position,event)
-    {
-      demoMessageLog += "Additional pressHandler\n" +
-	  "    tracker:" + tracker + "\n" +
-	  "    position:" + position + "\n" +
-	  "    event:" + event + "\n\n";
-      checkIfEventWasPassed(event);
-      updateDebugMessageOnScreenConsole();
     });
 
-    viewer.innerTracker.releaseHandler = function(tracker, position,buttonDown,insideElementRelease,event)
+    viewer.addHandler("press",  function( event ){
-    {
+        demoMessageLog += "Additional pressHandler\n" +
-	demoMessageLog += "Altered version of original releaseHandler\n" +
+        "    tracker:" + event.tracker + "\n" +
-	"    tracker:" + tracker + "\n" +
+        "    position:" + event.position + "\n" +
-	"    position:" + position + "\n" +
+        "    originalEvent:" + event.originalEvent + "\n\n";
-	"    buttonDown:" + buttonDown + "\n" +
+        checkIfEventWasPassed( event.originalEvent );
-	"    insideElementRelease:" + insideElementRelease + "\n" +
+        logMessage();
-	"    event:" + event + "\n\n";
-        checkIfEventWasPassed(event);
-	updateDebugMessageOnScreenConsole();
-    };
-    
-    viewer.addHandler("release",  function(tracker, position ,buttonDown,insideElementRelease,event)
-   {
-      demoMessageLog += "Additional releaseHandler\n" +
-	  "    tracker:" + tracker + "\n" +
-	  "    position:" + position + "\n" +
-	  "    buttonDown:" + buttonDown + "\n" +
-	  "    insideElementRelease:" + insideElementRelease + "\n" +
-	  "    event:" + event + "\n\n";
-      checkIfEventWasPassed(event);
-      updateDebugMessageOnScreenConsole();
-    });
-
-    viewer.innerTracker.keyHandler = function(tracker, keycode, shift,event)
-    {
-	demoMessageLog += "Altered version of original keyHandler\n" +
-	"    tracker:" + tracker + "\n" +
-	"    keycode:" + keycode + "\n" +
-	"    shift:" + shift + "\n" +
-	"    event:" + event + "\n\n";
-        checkIfEventWasPassed(event);
-        updateDebugMessageOnScreenConsole();
-    };
-    
-    viewer.addHandler("keypress",  function(tracker, keycode, shift,event)
-    {
-       demoMessageLog += "Additional keyHandler\n" +
-       "    tracker:" + tracker + "\n" +
-       "    keycode:" + keycode + "\n" +
-       "    shift:" + shift + "\n" +
-       "    event:" + event + "\n\n";
-       checkIfEventWasPassed(event);
-       updateDebugMessageOnScreenConsole();
     });
 
     
-    viewer.innerTracker.dragHandler = function(tracker, position, delta, shift,event)
+    viewer.addHandler("release",  function( event ){
-    {
+        demoMessageLog += "Additional releaseHandler\n" +
-	demoMessageLog += "Altered version of original dragHandler\n" +
+        "    tracker:" + event.tracker + "\n" +
-	"    tracker:" + tracker + "\n" +
+        "    position:" + event.position + "\n" +
-	"    position:" + position + "\n" +
+        "    buttonDown:" + event.buttonDown + "\n" +
-	"    delta:" + delta + "\n" +
+        "    insideElementRelease:" + event.insideElementRelease + "\n" +
-	"    shift:" + shift + "\n" +
+        "    originalEvent:" + event.originalEvent + "\n\n";
-	"    event:" + event + "\n\n";
+        checkIfEventWasPassed( event.originalEvent );
-        checkIfEventWasPassed(event);
+        logMessage();
-	updateDebugMessageOnScreenConsole();
-    };
-    
-    viewer.addHandler("drag",  function(tracker, position, delta, shift,event)
-    {
-      demoMessageLog += "Additional dragHandler\n" +
-	  "   tracker:" + tracker + "\n" +
-	  "   position:" + position + "\n" +
-	  "   delta:" + delta + "\n" +
-	  "   shift:" + shift + "\n" +
-	  "   event:" + event + "\n\n";
-      checkIfEventWasPassed(event);
-      updateDebugMessageOnScreenConsole();
     });
 
-    viewer.innerTracker.scrollHandler = function(tracker, position, scroll, shift,event)
-    {
-	demoMessageLog += "Altered version of original scrollHandler\n" +
-	"    tracker:" + tracker + "\n" +
-	"    position:" + position + "\n" +
-	"    scroll:" + scroll + "\n" +
-	"    shift:" + shift + "\n" +
-	"    event:" + event + "\n\n";
-        checkIfEventWasPassed(event);
-	updateDebugMessageOnScreenConsole();
-    };
     
-    viewer.addHandler("scroll",  function(tracker, position, scroll, shift,event)
+    viewer.addHandler("keypress",  function( event ){
-    {
+        demoMessageLog += "Additional keyHandler\n" +
-      demoMessageLog += "Additional scrollHandler\n" +
+        "    tracker:" + event.tracker + "\n" +
-	  "   tracker:" + tracker + "\n" +
+        "    keycode:" + event.keycode + "\n" +
-	  "   position:" + position + "\n" +
+        "    shift:" + event.shift + "\n" +
-	  "   scroll:" + scroll + "\n" +
+        "    originalEvent:" + event.originalEvent + "\n\n";
-	  "   shift:" + shift + "\n" +
+        checkIfEventWasPassed( event.originalEvent );
-	  "   event:" + event + "\n\n";
+        logMessage();
-      checkIfEventWasPassed(event);
-      updateDebugMessageOnScreenConsole();
     });
 
-    viewer.innerTracker.enterHandler =  function(tracker, position, buttonDown, buttonDownAny,event)
-    {
-	demoMessageLog += "Altered version of original enterHandler\n" +
-	"    tracker:" + tracker + "\n" +
-	"    position:" + position + "\n" +
-	"   buttonDown:" + buttonDown + "\n" +
-	"   buttonDownAny:" + buttonDownAny + "\n" +
-	"    event:" + event + "\n\n";
-        checkIfEventWasPassed(event);
-	updateDebugMessageOnScreenConsole();
-    };
     
-    viewer.addHandler("enter",  function(tracker, position, buttonDown, buttonDownAny,event)
+    viewer.addHandler("drag",  function( event ){
-    {
+        demoMessageLog += "Additional dragHandler\n" +
-      demoMessageLog += "Additional enterHandler\n" +
+        "    tracker:" + event.tracker + "\n" +
-	  "   tracker:" + tracker + "\n" +
+        "    position:" + event.position + "\n" +
-	  "   position:" + position + "\n" +
+        "    delta:" + event.delta + "\n" +
-	  "   buttonDown:" + buttonDown + "\n" +
+        "    shift:" + event.shift + "\n" +
-	  "   buttonDownAny:" + buttonDownAny + "\n" +
+        "    originalEvent:" + event.originalEvent + "\n\n";
-	  "   event:" + event + "\n\n";
+        checkIfEventWasPassed( event.originalEvent );
-      checkIfEventWasPassed(event);
+        logMessage();
-      updateDebugMessageOnScreenConsole();
     });
 
-    viewer.innerTracker.exitHandler = function(tracker, position, buttonDown, buttonDownAny,event)
-    {
-	demoMessageLog += "Altered version of original exitHandler\n" +
-	"    tracker:" + tracker + "\n" +
-	"    position:" + position + "\n" +
-	"   buttonDown:" + buttonDown + "\n" +
-	"   buttonDownAny:" + buttonDownAny + "\n" +
-	"    event:" + event + "\n\n";
-        checkIfEventWasPassed(event);
-	updateDebugMessageOnScreenConsole();
-    };
     
-    viewer.addHandler("exit",  function(tracker, position, buttonDown, buttonDownAny,event)
+    viewer.addHandler("scroll",  function( event ){
-    {
+        demoMessageLog += "Additional scrollHandler\n" +
-      demoMessageLog += "Additional exitHandler\n" +
+        "    tracker:" + event.tracker + "\n" +
-	  "   tracker:" + tracker + "\n" +
+        "    position:" + event.position + "\n" +
-	  "   position:" + position + "\n" +
+        "    scroll:" + event.scroll + "\n" +
-	  "   buttonDown:" + buttonDown + "\n" +
+        "    shift:" + event.shift + "\n" +
-	  "   buttonDownAny:" + buttonDownAny + "\n" +
+        "    originalEvent:" + event.originalEvent + "\n\n";
-	  "   event:" + event + "\n\n";
+        checkIfEventWasPassed( event.originalEvent );
-      checkIfEventWasPassed(event);
+        logMessage();
-      updateDebugMessageOnScreenConsole();
     });
 
-    viewer.innerTracker.focusHandler = function(tracker, event) 
-    {
-	demoMessageLog += "Altered version of original focusHandler\n" +
-	"    tracker:" + tracker + "\n" +
-	"    event:" + event + "\n\n";
-        checkIfEventWasPassed(event);
-	updateDebugMessageOnScreenConsole();
-    };
     
-    viewer.addHandler("focus",  function(tracker, event)
+    viewer.addHandler("enter",  function( event ){
-    {
+        demoMessageLog += "Additional enterHandler\n" +
-      demoMessageLog += "Additional focusHandler\n" +
+        "    tracker:" + event.tracker + "\n" +
-	  "   tracker:" + tracker + "\n" +
+        "    position:" + event.position + "\n" +
-	  "   event:" + event + "\n\n";
+        "    buttonDown:" + event.buttonDown + "\n" +
-      checkIfEventWasPassed(event);
+        "    buttonDownAny:" + event..buttonDownAny + "\n" +
-      updateDebugMessageOnScreenConsole();
+        "    originalEvent:" + event.originalEvent + "\n\n";
-     });
+        checkIfEventWasPassed( event.originalEvent );
+        logMessage();
+    });
 
-    viewer.innerTracker.blurHandler = function(tracker, event)
-    {
-       demoMessageLog += "Altered version of original blurHandler\n" +
-	"    tracker:" + tracker + "\n" +
-	"    event:" + event + "\n\n";
-       checkIfEventWasPassed(event);
-       updateDebugMessageOnScreenConsole();
-    };
     
-    viewer.addHandler("blur",  function(tracker, event)
+    viewer.addHandler("exit",  function( event ){
-    {
+        demoMessageLog += "Additional exitHandler\n" +
-      demoMessageLog += "Additional blurHandler\n" +
+        "    tracker:" + event.tracker + "\n" +
-	  "   tracker:" + tracker + "\n" +
+        "    position:" + event.position + "\n" +
-	  "   event:" + event + "\n\n";
+        "    buttonDown:" + event.buttonDown + "\n" +
-      checkIfEventWasPassed(event);
+        "    buttonDownAny:" + event.buttonDownAny + "\n" +
-      updateDebugMessageOnScreenConsole();
+        "    originalEvent:" + event.originalEvent + "\n\n";
+        checkIfEventWasPassed( event.originalEvent );
+        logMessage();
+    });
+
+    
+    viewer.addHandler("focus",  function( event ){
+        demoMessageLog += "Additional focusHandler\n" +
+        "    tracker:" + event.tracker + "\n" +
+        "    originalEvent:" + event.originalEvent + "\n\n";
+        checkIfEventWasPassed( event.originalEvent );
+        logMessage();
+    });
+
+    
+    viewer.addHandler("blur",  function( event ){
+        demoMessageLog += "Additional blurHandler\n" +
+        "    tracker:" + event.tracker + "\n" +
+        "    originalEvent:" + event.originalEvent + "\n\n";
+        checkIfEventWasPassed( event.originalEvent );
+        logMessage();
     });
 
         </script>