Search the Community
Showing results for tags 'event handling'.
Found 4 results
-
This one's a simple question, I am just trying to figure out where the supplementary markup code for the code is? I am fine coding this myself though, I was just making sure otherwise I will also check the source files provided on Larry Ullman's site. Figure 8.7/8.8 displays the form on reporting events on page 292. Thanks, Mark -
This chapter discusses a topic on keyboard events. I have provided links to my dev website. On page 284, the "change" event is added to the U.addEvent method. U.addEvent(U.$('comments'), 'change', limitText); http://www.sandiegowebcreative.com/text.html On page 284, the "keyup" event is added to the U.addEvent method. U.addEvent(U.$('comments'), 'keyup', limitText); http://www.sandiegowebcreative.com/text2.html I don't notice the difference between the two. I receive the same results from my browser, or I may not be noticing that which is obvious (or not as obvious?) Anyone come across this?
-
in chapter 8 there is a file (events2.js) updated to use the Utilities Object. However, when linked to events.html the code does not work. It resets the form on submit. The difference I found is the anonymous function called for the onload event of the window object. What I don't understand is why the events2.js doesn't work: ---- events2.js ---- window.onload = function() { 'use strict'; U.addEvent(U.$('theForm'), 'submit', setHandlers); }; ---- events.js ---- window.onload = function() { 'use strict'; U.$('theForm').onsubmit = setHandlers; }; ---- addEvent() ---- addEvent: function(obj, type, fn) { 'use strict'; if (obj && obj.addEventListener) { // W3C obj.addEventListener(type, fn, false); } else if (obj && obj.attachEvent) { // Older IE obj.attachEvent('on' + type, fn); } }, // End of addEvent() function.
-
I don't understand how to use e - so I've created a small form to test my understanding of event handling. The form requires a radio button to be checked. If I submit the form without checking a button the error message appears but then the form appears to be locked and I can't check a button. Firebug stops at this line U.stopDefault(e); which seems correct. Do I need to reset something? HTML <body> <form id="optInForm" method="post" action="optIn.php"> <fieldset><legend>Agree</legend> <label for="yes">Yes </label><input type="radio" name="optIn" value="TRUE" /> <label for="no">No </label><input type="radio" name="optIn" value="FALSE" /> <input type="submit" value="submit" id="submit"/> <input type="hidden" name="submitted" value="TRUE" /> <div id="errMsg"></div> </fieldset> </form> <script type="text/javascript" src="optIn.js"></script> <script type="text/javascript" src="utilities.js"></script> </body> optIn.js function checkForm() { 'use strict'; var optIn = document.getElementsByName('optIn'); var msg = ''; var chosen = null; for (var i=0, il = optIn.length; i<il; i++) { if (optIn[i].checked){ chosen = optIn[i].value; } } if (chosen === null) { msg='Please select Yes or No'; U.setText('errMsg', msg); U.stopDefault(e); } else { return true; } } // end checkForm function window.onload=function(){ 'use strict'; U.addEvent(U.$('optInForm'),'submit', checkForm); }; utilities.js var U = { $: function(id) { 'use strict'; if (typeof id =='string'){ return document.getElementById(id); } }, // end $ method 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 setText method 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 addEvent method 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 removeEvent method stopDefault: function(e) { 'use strict'; e = e || window.event; if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; } return false; } // end stopDefault method }; // end U class def
