CIS 89C Client-Side Programming with JavaScript

Unit 10 - Events (week 6)

(week 5 was partly done with week 4 and partly postponed)

References:

McDuffie - Chapter 5 Events and Event Handlers

Topics:

Opening statement

Event and event handlers defined - McDuffie page 132

Writing event handlers - McDuffie page 132

Intrinsic event attributes, also known as event handlers - McDuffie page 133

Load and unload - McDuffie page 134

Mouse over and mouse out - McDuffie page 136

Click - McDuffie page 140

Submit - McDuffie page 145

Reset - McDuffie page 146

Focus and blur - McDuffie page 147

Change - McDuffie page 149

Select - McDuffie page 150

Abort - McDuffie page 151

Error- McDuffie page 153

Cross-browser event handlers -- the safe list - McDuffie page 154

Other events -- the danger list - McDuffie page 156

Summary - McDuffie page 157

***********************************************************

Opening statement

Event handling is one of the key things we have been working toward in this course.

When the user does something, our event handler function can respond to the user action.

Most of the things we have already studied are fundamentals of JavaScript, which we need to know, in order to do event handling.

Many of the things we will do in the rest of this course will involve event handling.

The McDuffie book mixes learning a few random things about processing the events with a more complete discussion of what the events are.

The Pollock book starts discussing processing events very early in module 7

I plan to discuss what the events are first.

Initially I will just indicate that there will be some processing,

or will just do simple processing, such as just raising an alert.

Later we will come back to processing the events.

***********************************************************

Event and event handlers defined

An event is some detectable action in the window,

such as when the user clicks on a button.

Many events that happen in a window can be detected.

When one of these events occurs, our event handler code is automatically called, and our JavaScript code can produce a responding action.

***********************************************************

Writing event handlers

The name of the event is an attribute of an xhtml element.

For example, we can set up an event handler for a button element:

<button type="button" onclick="alert("hello")">Say hello</button>

When the user clicks the Say Hello button, the JavaScript in the value of the onclick attribute is executed.

Notes:

- The type attribute is given the value "button"

This type of button will not do anything, except execute the onclick JavaScript code.

- The attribute onclick is spelled in lower case, as required by XHTML.

The McDuffie book and the Pollock book show it in mixed upper and lower case, as permitted by HTML, but not XHTML.

Often, the JavaScript code in the onclick attribute value is a function call.

IMPORTANT:

The code in the onclick attribute must be written within one line.

So, always use a function if the code does not fit on one line.

Example:

<button type="button" onclick="hello()">Say hello</button>

This calls the hello function, which can do the desired hello activity.

***********************************************************

Intrinsic event attributes

There is a whole list of "intrinsic event attributes".

These attributes can be used in most XHTML elements.

These attributes have a value that is JavaScript.

When the event occurs to the XHTML element, the JavaScript executes.

The McDuffie book lists these as well supported:

on load onload

on unload onunload

on click onclick

on mouse over onmouseover

on mouse out onmouseout

on focus onfocus

on blue onblur

on submit onsubmit

on reset onreset

on select onselect

on change onchange

Others are listed as not as well supported.

Because every user agent has its own JavaScript engine,

there may be differences between user agents.

The Pollock book lists 22, including:

on abort onabort

on error onerror

on key down onkeydown

on key press onkeypress

on key up onkeyup

on mouse down onmousedown

on mouse up onmouseup

on mouse move onmousemove

on move onmove

on resize onresize

Pollock is a newer book than McDuffie, so I suppose the support is getting better.

We are historically accustomed to thinking of only browsers as the user agents that interpret JavaScript. More and more today, we encounter user agents on cell phones, personal digital assistants, and other hand held devices.

A whole new class of user agents, that is just starting to be introduced, are webos environments. Webos environments run on a personal computer to provide applications that use the web, as well as local data.

Personal devices and webos environments look like areas of prime JavaScript development for the next few years.

Now, we will look at these event handlers.

Most of them could be used to trigger an alert box;

that is what we might do in a simple demonstration.

More often they will be used to change the web page.

We will learn a few of the techniques for changing a web page in this introductory course, but have not done this yet. So I will mention some of these in the lecture, without giving the complete code. Later, we will build the code.

***********************************************************

Load and unload

Things that load include a:

- document

- image

- frameset

A document or frameset can also unload, when they are replaced with a new document or frameset.

Typical use is to take some action to set up something when a document loads.

This is done by putting an onload attribute in the body element.

Example (After: JavaScript for the World Wide Web by Tom Negrino and Dori Smith, 5th edition page 94.) is in the web page.

A function is provided that chooses a random image, from an array of image file names. Let's call this function chooseImage(). I do not show this function here, because it uses some things we have not covered yet, but you can understand what it would do.

<body onload="chooseImage();">

When the whole body of the page has been loaded, the JavaScript statement executes. This JavaScript statement calls the chooseImage() function.

***********************************************************

Mouse over and mouse out

When you put a cursor over a link, it may change color.

The color of the link is controlled by the browser based on html and css information, without the use of JavaScript.

If you want to do anything else on mouse over an XHTML element,

you will need to do it with an event handler, using JavaScript.

You might want the link to change size, or do something else, when the cursor is over the link. You can do this with the mouseover event handler.

When the cursor moves off the element, the mouseout event occurs.

Example:

<a href="page2.html"

mouseover="makeLinkBig()"

mouseout="makeLinkNormal()"

>

Then you can create these two JavaScript functions to make the link large when the mouse is over it, and return it to normal size when the mouse moves off it.

***********************************************************

Click

Click is often used with a button.

It works with form elements and <a> elements.

It may work with other elements.

Use the onclick event handler to process when the user clicks on an element.

Example, repeated from above:

<button type="button" onclick="hello()">Say hello</button>

***********************************************************

Submit

When the user clicks the submit button to submit a form, the form submit event occurs. There may be more than one submit button in a form. The onsubmit attribute is in the form element, NOT the submit button;

it is the form that is being submitted.

Example:

<form onsubmit="validateFields()">

… all the form contents …

***********************************************************

Reset

There can only be one reset button in a form. The onreset event is also an attribute of the form, NOT the reset button.

Example:

<form onsreset="reinitialize()">

… all the form contents …

***********************************************************

Focus and blur

Focus is most easily seen in windows. One window has focus; it is the window you can work in. The other windows may be seen, but cannot be acted on. Some things within the window can also receive focus. When something looses focus, it is said to blur.

onfocus works for body, frameset, button and input checkboxes.

onblur works for most of the elements in a form.

Example:

<body onfocus="wakeup()">

… all the body contents …

Example:

<input type="radio" onblur="turnOffRadio()">

***********************************************************

Change

The change occurs when the value in an element change, and the element looses focus. For example, if you type something in an input text element and press tab, the input text element has a change event.

If you are still typing, and have not yet moved off the input field, there is no change event yet. If the text in the field is unchanged, there is no change event.

Example:

<input type="text" onchange="processNewText()">

***********************************************************

Select

Select occurs when the user selects some, or all, of the text in the text area.

Example:

<input type="text" onselect="processNewText()">

***********************************************************

Abort

An abort event occurs when the user stops the load of an image.

This event handler is not commonly used.

***********************************************************

Error

An error event occurs when a JavaScript error occurs.

Usually, this event is avoided by careful debugging of the JavaScript before shipping the code.

***********************************************************

Cross-browser event handlers -- the safe list

In McDuffie's book, Table 5.5 provides a list of event handlers that usually work consistently on most current browsers. Of course, this list is not up-to-date.

***********************************************************

Other events -- the danger list

In McDuffie's book, Tables 5.6 and 5.7 provide lists that may not be as likely to work consistently.

Of course, every browser has its own JavaScript implementation.

They are all different. We are avoiding most of these problems by using only one browser in this beginning course.

In professional implementation of JavaScript, differences between user agents are a major consideration. Study and testing of multiple user agents is essential in professional development.

***********************************************************

Summary

We have discussed how the events are managed by providing JavaScript attribute values for the intrinsic event attributes.

We have not yet looked at what we will do when we process these events.

That is to say, we have learned how to catch a tiger by the tail, but not what to do next.

We will look at an introduction to the Document Object Model, and then return to see how we can use it to make the changes we want, when an event occurs.