Friday, July 18, 2008

Some java script snippets - Using Event Handler - part 2

Earlier we saw how to define a cross browser compatible event handler, we will see how to use it. Three different styles are demonstrated

Note: Copy the code into notepad or someother custom editor for more legibility




/**************************************************************************
Sample Event Listener definition begins
**************************************************************************/

var Handles = function(){
    
    var test1 = function (aEvent){    
        alert(1);
    }
    var test2;
    return {
        test1: test1,
        test2: test2
    }
}
Handles.prototype.test2 = function test2(aEvent){
    alert(2);
}
var HANDLES = new Handles();
/**************************************************************************
Event Listener definition ends
**************************************************************************/

function init(){
    cleanup();    
    /* Three different ways to register functions, 
       the event Type and function's name are parameters  */
    // test1 is defined in HANDLES
    HANDLER.registerEventHandlerWithType("load", "HANDLES.test1");
    // test2 is added as prototype later on
    HANDLER.registerEventHandlerWithType("load", "Handles.prototype.test2");    
    // cleanup is a globally visible function
    HANDLER.registerEventHandlerWithType("unload", "cleanup");
}

function cleanup() {
    /* Three different ways to unregister functions */    
    HANDLER.unregisterEventHandlerWithType("load", "HANDLES.test1");
    HANDLER.unregisterEventHandlerWithType("load", "Handles.prototype.test2");    
    HANDLER.unregisterEventHandlerWithType("unload", "cleanup");
}



The html code for the above contains



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- 
    Document   : test2
    Created on : 03-Jul-2008, 11:24:42    
-->

<html>
  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <script type="text/javascript" src="../js/File1.js">            
        </script> 
        <script type="text/javascript" src="../js/File2.js">            
        </script>
        <script type="text/javascript" >
            init();            
        </script>
  </head>
  <body onload="observeEvent(event)" onresize="observeEvent(event)">
    <div>
        Me
    </div>
  </body>
</html>

at

No comments:

Post a Comment