Download presentation
Presentation is loading. Please wait.
1
JavaScript: Introduction to Handling Events 20 th April 2011
2
Introduction Event Model Events Event Handling
3
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
4
Event Model The properties of event object may be: type, target, width, height, layerX, layerY, pageX, pageY,screenX, screenY, data, modifiers, which
5
Event Model
6
Program that prints all the properties of event object
7
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
8
Events function listAllProps(evt){ str="type= " +evt.type+"\n"; alert(str); } List all properties of JavaScript event object
9
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
10
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
11
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
12
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
13
<html><head> JavaScript Example JavaScript Example </head><body> The Javascript Back Button! The Javascript Back Button! <form> </form><br><br></body></html>
14
Another example.. Don't click this link!
15
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?"); } }
16
Another example.. Don't click this link!
Similar presentations
