1. Event Handling

2. Objectives Using event handlers Simulating events Using event-related methods

3. Understanding event An event includes: A. mouse movement B. button click C. keyboard press D. looking at the web page E. standing/sitting by/on your chair F. all of the above

4. Understanding event An event includes: A. mouse movement B. button click C. keyboard press D. looking at the web page E. standing/sitting by/on your chair F. all of the above

5. But D, E can be events too…. in the future Gaze detection system Body Posture Recognition

6. Understanding events HTML form controls which of the following? a. Selection menus b. Push buttons c. Text areas d. All of the above

7. Understanding events HTML form controls which of the following? a. Selection menus b. Push buttons c. Text areas d. All of the above

8. Understanding event handlers in Javascript An event handler is a piece of JavaScript code A. that runs when the mouse is clicked B. that runs when a user finishes typing in a textbox C. that runs when a user select an option from a listbox D. All of the above

9. Understanding event handlers in Javascript An event handler is a piece of JavaScript code A. that runs when the mouse is clicked B. that runs when a user finishes typing in a textbox C. that runs when a user select an option from a listbox D. All of the above

10. Understanding event handler in Javascript From last lecture’s lab on images, how can we call the function (say randomImage()) every time a user moves a mouse out of the current image A. B. C. Putting onMouseOver=randomImage(); inside the script D. None of the above

11. Understanding event handler in Javascript From last lecture’s lab on images, how can we call the function (say randomImage()) every time a user moves a mouse out of the current image A. B. C. Putting onMouseOver=randomImage(); inside the script D. None of the above

12. Events and Event Handlers An event is the occurrence of a mouse click, mouse movement, button click, keyboard press or release, etc. Events can be simulated or related to methods of form controls An event handler is a piece of JavaScript code that runs when the event occurs Event handlers are attached to HTML elements

13. Events and Event Handlers An event is the occurrence of a mouse click, mouse movement, button click, keyboard press or release, etc. Events can be simulated or related to methods of form controls An event handler is a piece of JavaScript code that runs when the event occurs Event handlers are attached to HTML elements

14. Events and Event Handlers An event is the occurrence of a mouse click, mouse movement, button click, keyboard press or release, etc. Events can be simulated or related to methods of form controls An event handler is a piece of JavaScript code that runs when the event occurs Event handlers are attached to HTML elements

15. Events and Event Handlers An event is the occurrence of a mouse click, mouse movement, button click, keyboard press or release, etc. Events can be simulated or related to methods of form controls An event handler is a piece of JavaScript code that runs when the event occurs Event handlers are attached to HTML elements

16. Using JavaScript events and event handlers, you can: create new instances of a browser window open dialog boxes for message displays allow the user to input information process information in forms run calculations create animations Events and Event Handlers (continued)

17. Creating Event Handler Step 1: Assign event handler as an attribute of an HTML tag (document, form, link) Step 2: Assign a value to the event handler (build-in method, user-defined function, or javascript statements)

18. Lab/Practice (onSubmit and onClick) Step 1: Cut and paste this code (Week9.htm) An HTML Form and the onSubmit Event Handler function checkForm(yourinfo){ // insert code here } Type your name here:

19. Lab/Practice Step 2: Modify this function checkForm(yourinfo) to: - check if the user types in “Netscape” or “netscape”, use alert box to congratulate the user and return true - Otherwise, use alert box to tell the user that “Sorry, it’s not X” (for example) and return false Step 3: Locate the comment in HTML document that said “change the line below”, add this to the tag onSubmit="return checkForm(document.info);"

20. Lab/Practice Step 4: delete this from the form tag. onSubmit="return checkForm(document.info);" And locate this line Insert this to the above tag onClick="return checkForm(document.info);" Step 5: What have we done?

21. Event handlers onclick - The onclick event is triggered when an element, such as a button, is clicked. onsubmit – The onsubmit event is triggered when a form is submitted.

22. Lab/Practice (onFocus, onBlur) Step 1:Below the text field in the previous example, insert another text field Step 2: Insert a functions in your script: function focusOnMe( ) { document.bgColor="pink"; }

23. Lab/Practice (onFocus, onBlur) Step 3: Insert another functions in your script: function defocusOnMe( ) { document.bgColor=“yellow"; } Step 4:Insert to the newly added tag the following: onFocus = "focusOnMe()" onBlur="deFocusOnMe()“ Step 5: What happened?

24. Event handlers onblur - The onblur event is triggered when an element that has focus (meaning it is selected) is about to lose focus because some other element is about to receive focus. The onblur event fires before the onfocus event of the next element

25. Event handlers onfocus - The onfocus event is triggered when an element receives focus because it is currently selected or active. Typically an element receives focus after another element loses focus.

26. Event Handlers (continued) onmouseout – The onmouseout event is triggered when the mouse was over an element then moves away. onmouseover – The onmouseover event is triggered when the mouse moves over an element.

27. Lab/Practice Step 1: Modify the previous practice so that: It has three textfields: one for name one for phone number one for address Step 2: When a user focuses on each field, use onFocus event to change the background color randomly to one of these “pink”, “lightblue”, “lightgreen”, and “lightyellow” Step 3: When a user leaves each text field, use onBlur event to check if the user has entered anything on that respective field. If he did not, alert him to enter some data.