Html is
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Reporting Events</title> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" href="css/form.css"> </head> <body> <!-- Script 8.7 - events.html --> <form action="#" method="post" id=U.$('theForm')> <fieldset><legend>Reporting Events</legend> <p>Select the events you want to listen for:</p> <div><label for="mouseover">mouseover</label><input type="checkbox" name="mouseover" id="mouseover" value="mouseover"></div> <div><label for="mouseout">mouseout</label><input type="checkbox" name="mouseout" id="mouseout" value="mouseout"></div> <div><label for="click">click</label><input type="checkbox" name="click" id="click" value="click"></div> <div><label for="keypress">keypress</label><input type="checkbox" name="keypress" id="keypress" value="keypress"></div> <div><label for="blur">blur</label><input type="checkbox" name="blur" id="blur" value="blur"></div> <div><input type="submit" value="Submit" id="submit"></div> <div><label for="output">Output</label><textarea name="output" id="output" disabled></textarea></div> </fieldset> </form> <script src="js/utilities.js"></script> <script src="js/events.js"></script> </body> </html>
utilities.js is
var U = { $: function(id) { 'use strict'; if (typeof id == 'string') { return document.getElementById(id); } }, // End of $() function. setText: function(id, message) { 'use strict'; if ( (typeof id == 'string') && (typeof message == 'string') ) { var output = this.$(id); if (!output) return false; if (output.textContent !== undefined) { output.textContent = message; } else { output.innerText = message; } return true; } // End of main IF. }, // End of setText() function. addEvent: function(obj, type, fn) { 'use strict'; if (obj && obj.addEventListener) { obj.addEventListener(type, fn, false); } else if (obj && obj.attachEvent) { obj.attachEvent('on' + type, fn); } }, // End of addEvent() funtion. removeEvent: function(obj, type, fn) { 'use strict'; if (obj && obj.removeEventListener) { obj.removeEventListener(type, fn, false); } else if (obj && obj.detachEvent) { obj.detachEvent('on' + type, fn); } } // End of removeEvent() function. }; // End of U declaration.
The events.js is
function reportEvent(e) { 'use strict'; if (typeof e == 'undefined') e = window.event; var target = e.target || e.srcElement; var msg = target.nodeName + ': ' + e.type + '\n'; U.$('output').value += msg; } // End of reportEvent() function. function setHandlers(e) { 'use strict'; var event = ['mouseover', 'mouseout', 'click', 'keypress', 'blur']; for (var i = 0, count = events.length; i < count; i++) { var checkbox = U.$(events); if (checkbox.checked) { U.addEvent(document, events, reportEvent); } else { U.removeEvent(document, evets, reportEvent); } } // End of FOR loop. U.$('output').value = ''; return false; } //End of setHandlers9 function. window.onload = function() { 'use strict'; U.$('theForm').onsubmit = setHandlers; };
Any help would be awesome!
