1 CSC160 Chapter 7: Events and Event Handlers
1 CSC160 Chapter 7: Events and Event Handlers. 2 Outline Event and event handlers onClick event handler onMouseOver event handler onMouseOut event handler.
Jan 18, 2016
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
1
CSC160
Chapter 7: Events and Event Handlers
2
Outline
• Event and event handlers• onClick event handler• onMouseOver event handler• onMouseOut event handler• onLoad event handler• onUnLoad event handler• onFocus event handler• onBlur event handler• onChange event handler• onSubmit event handler
3
Events and Event Handlers
• An event is something that happens when the viewer of a Web page performs some sort of action, including:• Clicking a mouse button• Clicking a button on the page• Changing the contents of a form element• Moving the mouse over a link on the page• ……
• An event handler is a predefined JavaScript keyword that is used to handle an event on a Web page.
4
Why Event Handlers are Useful
• Event handlers enable us to gain access to the events that may occur on the page.
• Therefore, we can make things happen based on the actions of the viewer, which enables us to make more-interactive Web pages.• For example, send an alert to the viewer when he or she
moves the mouse over a link.
5
Event Handler Locations
• Where do we place the event handlers in an HTML document?• Form elements• Link tags <A></A>• The opening BODY tag• Other areas
Forms
• An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.
• Users "complete" a form by modifying its controls (entering text, selecting menu items, etc.).
• Users generally submit the form to an agent for processing (e.g., to a Web server, to a mail server, etc.).
6
Forms – Control Types
• buttons• checkboxes• radio buttons• menus• text input• file select• hidden controls• object controls
7
8
onClick Event Handler
• The onClick event handler is used to make something happen when the viewer clicks a specific area of the Web page.
• In the following example, an alert window pops up whenever the viewer clicks the button element in the form.• Tags <FORM> </FORM> are used to create a form in the
web page• The <INPUT> tag is used to create an element in the form
• The attribute type specifies the type of the element. In the example, we creates a button as an element of the form.
• Using the onClick event handler as an attribute requires you to use double quotes around all your JavaScript code, so when you need quote marks for the alert, use single quotes in order to avoid possible errors.
9
onClick Event Handler (cont’d)
<HTML>
<HEAD><TITLE>onclick0.htm</TITLE></HEAD>
<BODY><FORM><INPUT type="button" value="Don’t Click Here" onClick="window.alert('I told you not to click on me!');"></FORM></BODY>
</HTML>
• The alert command ends with a semicolon. This enables you to add additional JavaScript code after the alert, which enables you to perform multiple actions on the click event rather than just a single JavaScript statement.
10
onClick Event Handler (cont’d)• In the following example, multiple actions are performed on
the click event rather than just a single JavaScript statement.
<HTML>
<HEAD><TITLE>onclick1.htm</TITLE></HEAD>
<BODY><FORM><INPUT type="button" value="Don’t Click Here" onClick="window.alert('I told you not to click on me!'); window.alert(‘Be careful!’); window.alert(‘Bye!’);"></FORM></BODY>
</HTML>
11
onClick Event Handler (cont’d)
• If the code for an event handler is long, or if you will repeat it several times in the HTML document, you may put the code in a function.
• In the following example, we place three alerts within a function inside the HEAD section of the HTML document, and call the function from an event handler in the BODY section.
12
onClick Event Handler (cont’d)<HTML><HEAD><TITLE>onclick2.htm</TITLE><SCRIPT language=“JavaScript”><!--function _3alerts(){ window.alert('I told you not to click on me!'); window.alert(‘Be careful!’); window.alert(‘Bye!’);}//--></SCRIPT></HEAD>
<BODY><FORM><INPUT type="button" value="Don’t Click Here" onClick=“_3alerts();"></FORM></BODY></HTML>
13
onClick Event Handler (cont’d)
• In the following example, an alert pops up whenever the viewer clicks a link.
<HTML>
<HEAD><TITLE>onclick3.htm</TITLE></HEAD>
<BODY><A href="http://www.eku.edu" onClick="window.alert(‘You are going to visit the homepage of EKU.');"> Eastern Kentucky University </A></BODY>
</HTML>
14
onMouseOver Event Handler• The mouseover event occurs when a viewer moves the
mouse cursor over an area on the page such as a text link, linked image, linked portion of an image map.
• The mouseover event is handled with the onMouseOver event handler.<HTML>
<HEAD><TITLE>onMouseOver.htm</TITLE></HEAD>
<BODY><A HREF="http://pagesource.com"onMouseOver="window.alert('I told you not to try to click me!');">Don't Try Clicking Me!</A></BODY>
</HTML>
15
onMouseOut Event Handler• The mouseout event occurs when a viewer moves the mouse
cursor away from an area on the page. • The mouseover event is handled with the onMouseOut event
handler.
<HTML>
<HEAD><TITLE>onMouseOut.htm</TITLE></HEAD>
<BODY><A HREF="http://pagesource.com"onMouseOut="window.alert(‘What, you don\’t like my link?');">Click Me!</A></BODY>
</HTML>
16
onLoad Event Handler
• The load event occurs when a Web page finishes loading. • The load event is handled with the onLoad event handler
which is placed in the opening BODY tag on a web page.
<HTML>
<HEAD><TITLE>onLoad.htm</TITLE></HEAD>
<BODY onLoad="window.alert('I\'m done loading now!');"><B>Text for the body of the page</B></BODY>
</HTML>
17
onUnLoad Event Handler• The unload event occurs when a viewer leaves the current Web page. • The unload event is handled with the onUnLoad event handler which is
placed in the opening BODY tag on a Web page.
<HTML>
<HEAD><TITLE>onUnLoad.htm</TITLE></HEAD>
<BODY onUnLoad="window.alert('Be sure to come back, OK?');"><B>Other HTML code goes here</B><BR><A HREF="http://www.eku.edu">Eastern Kentucky University</A></BODY>
</HTML>
18
onFocus Event Handler
• The focus event occurs when a viewer gives focus to a window or a form element on a web page. • The viewer gives focus to something by clicking
somewhere within the item, by using the keyboard to move to the item (often via the TAB key), or via a script.
• The focus event is handled with the onFocus event handler which can be placed in a form element or in the opening BODY tag on a web page (for focus on a window).
19
onFocus Event Handler (cont’d)
<HTML>
<HEAD><TITLE>onFocus.htm</TITLE></HEAD>
<BODY><FORM>Enter Your Name:<INPUT type="text" onFocus="window.alert('Don\'t forget to capitalize!');"></FORM></BODY>
</HTML>
20
onBlur Event Handler
• The blur event is the opposite of the focus event. It occurs when a viewer takes the focus away from a window or a form element on a Web page. • To take the focus off something, the viewer usually gives
focus to something else.• The blur event is handled with the onBlur event
handler which can be placed in a form element or in the opening BODY tag on a web page (for focus on a window).
21
onBlur Event Handler (cont’d)<HTML>
<HEAD><TITLE>onblur.htm</TITLE></HEAD>
<BODY><FORM>Give this box focus:<INPUT type="text" onBlur="window.alert('Hey, come back!');"><BR>Then give this box focus to blur the first one:<INPUT type="text"></FORM></BODY>
</HTML>
22
onChange Event Handler
• The change event occurs when a viewer changes something within a form element.• For example, the viewer might change the text in a text
box or make a selection from a select box.• The change event is handled with the onChange
event handler.
23
onChange Event Handler (cont’d)
<HTML>
<HEAD><TITLE>onChange.htm</TITLE></HEAD>
<BODY><FORM>Would you like to sign up now?<BR>
<SELECT onChange="window.alert(‘Are you sure to change?');"><OPTION selected>Yes</OPTION><OPTION>No</OPTION><OPTION>Undecided</OPTION></SELECT>
</FORM></BODY>
</HTML>
24
onSubmit Event Handler
• The submit event only occurs when a viewer submits a form on a Web page.
• The submit event is handled with the onSubmit event handler, which can be called from an opening FORM tag.
25
onSubmit Event Handler (cont’d)
<HTML>
<HEAD><TITLE>onSubmit.htm</TITLE></HEAD>
<BODY>
<FORM onSubmit="window.alert('Thank You');">What is your name?<BR><INPUT type="text" name="thename"><BR><INPUT type="submit"></FORM>
</BODY>
</HTML>
26
Creating Scripts Using Event Handlers
• Problem 1: Change the text inside the status bar of the browser window.
• Problem 2: Make a form button into a button that acts like a link.
27
Status Bar Change
• The status bar is at the bottom of the browser window.
• We can change the text in the status bar of the browser, using a window property, window.status
• We need to return true in order to make sure the new text will override the original text that the browser displays.
28
Status Bar Change (cont’d)
<HTML>
<HEAD><TITLE>Status Bar</TITLE></HEAD>
<BODY><A href="http://www.eku.edu" onMouseOver="window.status='The cursor is moved OVER the link'; return true;"onMouseOut="window.status='The cursor is moved OUT of the link'; return true;">Eastern Kentucky University</A></BODY>
</HTML>
29
Button Link
• Using JavaScript, we can turn a plain form button into a link, using another new property: window.location
• It enables us to change the URL address of the window in which you use it.
30
Button Link (cont’d)<HTML>
<HEAD><TITLE>Button Link</TITLE></HEAD>
<BODY><FORM><INPUT Type="button" value="Go Searching!"onClick="window.location='http://www.google.com';"><p><INPUT Type="button" value="HTML Help!"onClick="window.location='http://www.pageresource.com';"><p><INPUT Type="button" value="Some JavaScripts!"onClick="window.location='http://www.javascriptcity.com';"></FORM></BODY>
</HTML>
Related Documents
