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>
Posts
No comments:
Post a Comment