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 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 are used to create a form in the web page The 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) onclick0.htm 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. onclick1.htm

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) onclick2.htm <!-- function _3alerts() { window.alert('I told you not to click on me!'); window.alert(‘Be careful!’); window.alert(‘Bye!’); } //-->

13 onClick Event Handler (cont’d) In the following example, an alert pops up whenever the viewer clicks a link. onclick3.htm Eastern Kentucky University

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. onMouseOver.htm <A HREF=" onMouseOver="window.alert('I told you not to try to click me!');"> Don't Try Clicking Me!

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. onMouseOut.htm <A HREF=" onMouseOut="window.alert(‘What, you don\’t like my link?');"> Click Me!

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. onLoad.htm Text for the body of the page

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. onUnLoad.htm Other HTML code goes here Eastern Kentucky University

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) onFocus.htm Enter Your Name: <INPUT type="text" onFocus="window.alert('Don\'t forget to capitalize!');">

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) onblur.htm Give this box focus: Then give this box focus to blur the first one:

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) onChange.htm Would you like to sign up now? Yes No Undecided

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) onSubmit.htm What is your name?

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) Status Bar <A href=" 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

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) Button Link <INPUT Type="button" value="Go Searching!" onClick="window.location=' <INPUT Type="button" value="HTML Help!" onClick="window.location=' <INPUT Type="button" value="Some JavaScripts!" onClick="window.location='