event handling. objectives using event handlers simulating events using event-related methods
TRANSCRIPT
![Page 1: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/1.jpg)
Event Handling
![Page 2: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/2.jpg)
Objectives
Using event handlers Simulating events Using event-related methods
![Page 3: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/3.jpg)
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
![Page 4: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/4.jpg)
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
![Page 5: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/5.jpg)
But D, E can be events too…. in the future
Gaze detection system
Body Posture Recognition
![Page 6: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/6.jpg)
Understanding events
HTML form controls which of the following?
a. Selection menus
b. Push buttons
c. Text areas
d. All of the above
![Page 7: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/7.jpg)
Understanding events
HTML form controls which of the following?
a. Selection menus
b. Push buttons
c. Text areas
d. All of the above
![Page 8: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/8.jpg)
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
![Page 9: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/9.jpg)
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
![Page 10: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/10.jpg)
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. <img name="display“ src="spring.jpg“ border=0 width="200" height="250" onMouseOver=“randomImage();“>
B. <img name="display“ src="“randomImage();“ “ border=0 width="200" height="250">
C. Putting onMouseOver=randomImage(); inside the script
D. None of the above
![Page 11: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/11.jpg)
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. <img name="display“ src="spring.jpg“ border=0 width="200" height="250" onMouseOver=“randomImage();“>
B. <img name="display“ src="“randomImage();“ “ border=0 width="200" height="250">
C. Putting onMouseOver=randomImage(); inside the script
D. None of the above
![Page 12: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/12.jpg)
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
![Page 13: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/13.jpg)
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
![Page 14: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/14.jpg)
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
![Page 15: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/15.jpg)
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
![Page 16: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/16.jpg)
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)
![Page 17: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/17.jpg)
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)
![Page 18: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/18.jpg)
Lab/Practice (onSubmit and onClick)
Step 1: Cut and paste this code (Week9.htm)<html><head><title>An HTML Form and the onSubmit Event
Handler</title>
<script language="JavaScript">
function checkForm(yourinfo){
// insert code here
}
</script> </head> <body> <b>
<!-- change the line below -->
<form name="info" method="post" ><p>
<font size="+1"><p>
Type your name here:
<input type="text" name="namestring" size="50">
<p>
<input type="submit" value="Submit" >
<input type="reset" value="Clear">
</form> </body> </html>
![Page 19: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/19.jpg)
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 <form> tagonSubmit="return checkForm(document.info);"
![Page 20: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/20.jpg)
Lab/Practice
Step 4: delete this from the form tag.onSubmit="return checkForm(document.info);"
And locate this line<input type="submit" value="Submit“>
Insert this to the above <input> tagonClick="return checkForm(document.info);"
Step 5: What have we done?
![Page 21: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/21.jpg)
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.
![Page 22: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/22.jpg)
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";}
![Page 23: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/23.jpg)
Lab/Practice (onFocus, onBlur)
Step 3: Insert another functions in your script:function defocusOnMe( ) {
document.bgColor=“yellow";}
Step 4:Insert to the newly added <input> tag the following:
onFocus = "focusOnMe()" onBlur="deFocusOnMe()“
Step 5: What happened?
![Page 24: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/24.jpg)
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
![Page 25: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/25.jpg)
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.
![Page 26: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/26.jpg)
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.
![Page 27: Event Handling. Objectives Using event handlers Simulating events Using event-related methods](https://reader036.vdocuments.mx/reader036/viewer/2022062309/5697c0081a28abf838cc6888/html5/thumbnails/27.jpg)
Lab/PracticeStep 1: Modify the previous practice so that:
It has three textfields:one for nameone for phone numberone 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.