JavaScript: Introduction to Handling Events 20 th April 2011
Introduction Event Model Events Event Handling
Event Model Event model is based on interaction between a web surfer and a web page Events can be classified into two broad groups: Navigation: clicking on links to browse through web pages Filling a form: entering data and checking form elements JavaScript event model is based on event object event object connects event source to event handler When an event occurs, JavaScript sends event object to event handler
Event Model The properties of event object may be: type, target, width, height, layerX, layerY, pageX, pageY,screenX, screenY, data, modifiers, which
Event Model
Program that prints all the properties of event object
Events JavaScript has a unique event for each event source: Event name Event Source Event handler abort image onAbort click text field/area, list onChange dragDrop window onDragDrop error image, window onError keyDown doc, image, link onKeyDown keyPress doc, image, link onKeyPress mouseMove nothing onMouseMove mouseOut link, image map onMouseOut mouseOver link, image map onMouseOver reset reset button form onReset resize window onResize submit submit button form onSubmit
Events function listAllProps(evt){ str="type= " +evt.type+"\n"; alert(str); } List all properties of JavaScript event object
Events JavaScript has a unique event for each event source: Event name Event Source Event handler abort image onAbort click checkbox, radio button,onClick submit button, reset button & link changetext field/area, list onChange dragDrop window onDragDrop error image, window onError keyDown doc, image, link onKeyDown keyPress doc, image, link onKeyPress mouseMove nothing onMouseMove mouseOut link, image map onMouseOut mouseOver link, image map onMouseOver reset reset button form onReset resize window onResize submit submit button form onSubmit
Event Handling Event handlers handle and process events Event handler is included as an attribute of a XHMTL tag Event handlers must be enclosed in quotes Handlers are executed first, then XHTML content is rendered Event handlers can be written as: Inline script: JavaScript code is included inside XHTML tag Function call: event handlers are written as functions in tag and called from the XHTML tag Function call style is better than inline style
Event Handling Event handlers handle and process events Event handler is included as an attribute of a XHMTL tag Event handlers must be enclosed in quotes Handlers are executed first, then XHTML content is rendered Event handlers can be written as: Inline script: JavaScript code is included inside XHTML tag Function call: event handlers are written as functions in tag and called from the XHTML tag Function call style is better than inline style Event Handlers “glue” XHTML and JavaScript together
Reference Steven M. Schafer (2005), HTML, CSS, JavaScript, Perl, and PHP Programmer's Reference, Hungry Minds Inc,U.S. Dan Cederholm (2005), Bulletproof Web Design: Improving Flexibility and Protecting Against Worst-Case Scenarios with XHTML and CSS, New Riders. Ibrahim Zeid (2004), Mastering the Internet, XHTML, and Javascript
<html><head> JavaScript Example JavaScript Example </head><body> The Javascript Back Button! The Javascript Back Button! <form> </form><br><br></body></html>
Another example.. Don't click this link!
Another example.. var browserName=navigator.appName; if (browserName=="Netscape") { alert("Hi Netscape User!"); } else { if (browserName=="Microsoft Internet Explorer") { alert("Hi, Explorer User!"); } else { alert("What ARE you browsing with here?"); } }
Another example.. Don't click this link!