event handling. objectives using event handlers simulating events using event-related methods

Event Handling

Objectives

Using event handlers Simulating events Using event-related methods

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

But D, E can be events too…. in the future

Gaze detection system

Body Posture Recognition

Understanding events

HTML form controls which of the following?

a. Selection menus

b. Push buttons

c. Text areas

d. All of the above

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

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

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

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)

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)

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>



<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>

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);"

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?

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.

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";}

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?

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

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.

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.

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.

event handling. objectives using event handlers simulating events using event-related methods

Documents