1. CNIT 133 Interactive Web Pags – JavaScript and AJAX Event and Event Handling

2. Agenda My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes).http://fog.ccsf.edu/~hyip Event and Event handling. Event samples.

3. Event and Event Handler Defined Events: are visitor and browser activities. (the phone rings) Event handlers: are the mechanisms that allow us to capture and actually respond to those events with a scripting language. (pick up the phone and say, “Hello”)

4. Writing Event Handlers Event handlers: are written inline with HTML, just like an HTML attribute. Therefore, Event handlers also called intrinsic event attributes. (the only different is that Event Handler executes JS script or function). HTML Tag: Event handler/intrinsic event attribute:

5. Events and Event Handling JavaScript programs use an event-driven programming model. The web browser generates an event whenever something interesting happens to the document or to some element of it. For example, the web browser generates an event when it finishes loading a document, when the user moves the mouse over a hyperlink, or when the user clicks on a button in a form If a JavaScript application cares about a particular type of event for a particular document element, it can register an event handler – a JavaScript function or snippet of code – for that type of event on the element of interest. Then, when the particular event occurs, the browser invokes the handler code. All application with graphical user interfaces are designed this way: they sit around waiting for the user to do something interesting (i.e. they wait for events to occur), and then they respond.

6. Events and Event Handling Three distinct and incompatible event- handling models are in used:  The original event model  The standard event model  The Internet Explorer event model

7. Basic Event Handling In the original event model, event-handling code is specified using the attributes of HTML elements. Thus, if your application needs to know when the user moves the mouse over a specific hyperlink, you use the onmouseover attribute of the tag that defines the hyperlink. If the application needs to know when the user clicks the Submit button, you use the onClick attribute of the tag that defines the button or the onsubmit attribute of the element that contains that button.

8. Basic Event Handling There are quite a few different event-handler attributes that you can use in the original event model. They are :  onblur  onchange  onclick  onfocus  onkeydown  onkeypress  onkeyup  onload  onmousedown  onmousemove  onmouseout  onmouseover  onmouseup  onsubmit  onunload

9. Event Handler Return Values In many cases, an event handler uses its return value to indicate the disposition of the event. For example, if you use the onsubmit event handler of a Form object to perform form validation and discover that the user has not filled in all the fields, you can return false from the handler to prevent the form from actually being submitted: <form action = "search.cgi" onsubmit="if (this.elements[0].value.length == 0) return false; ">

10. Event Handlers and the this Keyword When your event handler is invoked, it is invoked as a method of the element on which the event occurred, so the this keyword refers to that target element: // the this keyword refers to the Button object.

11. The Pseudo-protocol & the void operator The pseudo-protocol (javascript:) in the href attribute of an or tag: the idea is that instead of requesting a document, the JS pseudo-protocol will instead execute one or more JS statements, which may or may not return a URL to the href. The void operator: tells the interpreter to evaluate an expression and return no value.  void (expression) or void expression  NOTE: void is an operator, not a function, where expression is an expression to be evaluated. Parentheses are optional. You want to make certain that a statement called via the pseudo-protocol does not return a value and provoke the link to load a new document indicated by the returned value. The void operator will ensure that no value is returned to the hypertext link at all.

12. Intrinsic Event Attributes EventIntrinsic Event Attribute LoadonLoad (associated with windows, images) UnloadonUnload (associated only with windows) ClickonClick (associated with any elements) MouseOveronMouseOver (associated with any elements) MouseOutonMouseOut (associated with any elements) FocusonFocus (associated with windows, frames, links, and form elements) BluronBlur (associated with windows, frames, links, and form elements) SubmitonSubmit (associated with forms) ResetonReset (associated with forms) SelectonSelect (associated with text boxes, password, text areas) ChangeonChange (associated with text boxes, text areas, password, file uploads, select lists)

13. Event – onload sample function mymessage() { alert("This message was triggered from the onload event"); }

14. Event – onunload sample function mymessage() { alert("This message was triggered from the onunload event"); } An alert box will display a message when you close this document!

15. Event – onchange sample function preferedBrowser() { prefer=document.forms[0].browsers.value; alert("You prefer browsing internet with " + prefer); } Choose which browser you prefer: Internet Explorer Netscape

16. Event – onsubmit sample function confirmInput() { fname=document.forms[0].fname.value; alert("Hello " + fname + "! You will now be redirected to www.ccsf.edu"); } Enter your name:

17. Event – onblur sample function message() { alert("This alert box was triggered by the onblur event handler"); } The onblur event occurs when an element loses focus. Try to click or write in the input field below, then click elsewhere in the document so the input field loses focus. Enter your name:

18. Event – onfocus sample function message() { alert("This alert box was triggered by the onfocus event handler"); } Enter your name:

19. Event – onmouseover & onmouseout sample <h1 onmouseover="style.color='red'" onmouseout="style.color='black'"> Mouse over this text

20. Event – onclick sample function disp_func() { Alert(“This alert box was triggered by the onclick event handler”); }

21. Event – onmousemove sample var i=1; function moveright() { document.getElementById('header').style.position="relative"; document.getElementById('header').style.left=i; i++; } Move the mouse over this page

22. In-class sample 0 Events function callHandler(str) { } Event and Event Handler Move the mouse to this text and see. Then move the mouse out of the text and see!! Click Here Text Box:

23. In-class sample 1 Events function callHandler(str) { alert(str); } Event and Event Handler Move the mouse to this text and see. Then move the mouse out of the text and see!! Click Here <!-- or use this format Click Here --> <form action="" method="post" onSubmit="callHandler('Form submitted! Thank you!')" onReset="callHandler('Reset event'); return confirm('Are you sure to reset?')"> Text Box: <input type="text" onFocus="callHandler('Focus to text box')" onBlur="callHandler('Text box lost focus')" onChange="call Handler('Text box changes data!')" onSelect="callHandler('Selected some text in text box')">