Project 8: Reacting to Events Essentials for Design JavaScript Level One Michael Brooks.

Project 8: Reacting to Events

Essentials for DesignJavaScript

Level OneMichael Brooks

Copyright (c) 2004 Prentice-Hall. All rights reserved. 2

Objectives

Detect mouse events

Use events with the <body> tag

Apply blur and focus event handlers


Objectives (continued)

Detect keyboard events

Utilize form events Apply selection

events Advanced use of

event handlers


Why Would I Do This?

Events are an important part of object-oriented programming

Keywords that allow us to detect and react to events are called event handlers Event handlers are occasionally

referred to as listeners in advanced programming applications


Why Would I Do This? (continued) Event handlers are almost always used to

"bind" HTML and JavaScript code together Using JavaScript event handlers can be used

to trigger actions when certain events are detected

Most practical uses of JavaScript require the detection of a specific event such as: when the user rolls over an image when a user submits a form


Visual Summary

Event handlers are usually used inline with HTML tags

The onclick event handler appears to be an HTML attribute of the <p> tag

Example

<p onclick="alert('hi!');">Welcome to my site.</p>


Visual Summary (continued)

Event handlers always start with the word on followed by the event This is typical of most object oriented

languages Event handlers aren't case sensitive when

used inline in HTML



Event handler statements are typically written in one of three ways:

Type: ExampleMethod onclick="alert('hi');"User-Defined Function onmouseover="myFunction();"Multiple Statements onkeypress="window.open(); x=10;"



In object oriented languages, events are tied to particular objects

In JavaScript, event handlers are bound to HTML tags or the object that represents the HTML tag

Each HTML tag has a list of event handlers which it can detect and to which it can respond


Detecting Mouse Events

Events related to the use of a mouse were among the first event handlers to be added to JavaScript

Newer versions of JavaScript contain event handlers to detect such things as the roll of a mouse wheel


Detecting Mouse Events (continued)

OnClick and Ondblclick The onclick event fires when an object is clicked The ondblclick event fires when the user double

clicks the mouse on an object The onclick and ondblclick event handlers work

on virtually any element that can be displayed on the screen


Detecting Mouse Events (continued) OnClick and Ondblclick

The onclick event fires when an object is clicked The ondblclick event fires when the user double

clicks the mouse on an object The onclick and ondblclick event handlers work

on virtually any element that can be displayed on the screen

<img src="mypic.jpg" ondblclick="alert('You double clicked!');">



ONMOUSEDOWN, ONMOUSEMOVE, ONMOUSEOUT, ONMOUSEOVER The onmousedown event fires when the user

clicks the mouse on an object The onmousemove event fires when the mouse

moves while over an element



The onmouseover handler fires when the mouse initially moves over the edge of an element

The onmouseout event fires when the user moves the mouse off of an element

<img src="normal version of the image;"onmouseover="switch the normal image with a rollover version;"onmouseout="remove the rollover image and return the original image;"onmousedown="go to the associated URL;">



Use OnClick The onclick event fires when an object is

clicked Example



Detect Double Mouse Clicks The onclick event fires when an object is

double clicked Example



Detecting Rollovers The onmouseover event fires when the

mouse initially moves over the edge of an element

Example


Using Events with the <body> Tag

The <body> tag is a display tag which represents every item displayed in the active part of the browser window Since the <body> tag represents the page that

is displayed, event handlers such as onclick or onmouseover can be used with the <body> tag

Despite this ability, onclick or onmouseover rarely have practical applications when used with the <body>


Using Events with the <body> Tag (continued)

Other event handlers can be used with the <body> tag which are much more useful The onload event handler can be used to

trigger events a HTML page has finished loading into the browser


Using Events with the <body> Tag (continued) onload

The onload handler fires when the last character of the HTML page has loaded

This event is typically used with the <body> or <frameset> tag but may also be attached to: <applet> tag <embed> tag <link> tag <script> tag <style> tag

<body onload="alert('The page has finished loading.');">


Using Events with the <body> Tag (continued) onresize

This handler indicates the page is being resized This event is typically used with the <body> tag

as in the following example This event handler opens up all kinds of options

for Web designers

<body onresize="alert('page resized');">


Using Events with the <body> Tag (continued) onunload

This event: fires when the browser is leaving the current

document in a window or frame fires when the reset button is used, since the refresh

button unloads the current document then loads a new version of the file

can be used with the <body> or <frameset> tag Example


Using Events with the <body> Tag (continued) Using Onresize

This handler indicates the page is being resized This event is typically used with the <body> tag

as in the following example Example of resizing the current document to a

resolution of 640*480, approximately one second after the function is invoked


Using Events with the <body> Tag (continued) Correct Event Detection Issues

If you will try to use self.resizeTo() without

setTimeout() method, you may notice a "jerky" effect as the window constantly resizes as you try to resize it because the event is constantly being detected and acted upon

Example of resizing the current document to a resolution of 640*480, without the setTimeout() method


Applying Blur and Focus Event Handlers The focus() and blur()

methods can also be used with form elements

The user can also create these events by choosing an object with the mouse


Applying Blur and Focus Event Handlers (continued) If a window or frame has focus, it means

that any keystrokes we type will be directed to that window

We can give focus to windows in a number of ways such as: clicking in or on the window using the focus() method


Applying Blur and Focus Event Handlers (continued)

The onblur event fires when focus is given to another window The onblur event can be used with the following

tags: <a> <area> <body> <ilayer> <button>

<input> <label><select><textarea><applet><area>

<div><object><span><table><td>



The onfocus event fires when the user chooses the specified window The onfocus event can be used with the

following tags: <a> <applet> <area> <button> <div>, <embed>

<hr><img><input><label><marquee>

<object><select><table><td><tr><textarea>



Detecting the Blur of a Window Object The onblur and onfocus events can be used

effectively to stop actions in a window Example


Detecting Keyboard Events

Keyboard events refer to a group of events related keys being pressed on the keyboard

Keyboard events usually fire when the user either presses or releases a key

Keyboard event handlers offer the opportunity to create usable experiences for disabled users who may have difficulty using a mouse


Detecting Keyboard Events (continued)

ONKEYDOWN, ONKEYPRESS, ONKEYUP The onkeydown event fires if a key is pressed

while the element has focus The event fires:

as soon as the user presses the key and the key doesn't have to be released

no matter which key is pressed



The onkeypress event fires if a key is pressed and then released while the element has focus The event:

doesn't fire until the key is released fires no matter which key is pressed



The onkeyup event fires when a key is released when the element has focus the event doesn't fire until the key is released


Detecting Keyboard Events (continued) Detect a Keypress <html>

<head><title>onkeypress.html - shows the onkeypress event handler</title></head><body><p>Press a key while the link below is active and you will generate an alert box.</p><p><a href="#" onkeypress="alert('hi!');">Welcome to my site.</a></p></body></html>


Use Form Related Events

Forms offer very practical uses for various event

Various techniques can be accomplished by detecting whether forms have been submitted or reset


Use Form Related Events (continued)

onsubmit The onsubmit handler

indicates that a form is being submitted, usually by the press of a submit button

This event is usually bound to the <form> tag

Example



onreset The onreset handler indicates that a form is

being reset, usually by the press of a reset button

This event is usually bound to the <form> tag Example



Use the OnSubmit Event Handler The onsubmit event

handler can be used to detect when the user is ready to submit the contents of the form

Example


Use a Selection Event

Event handlers exist which allow the developer to determine if text has been selected or changed

These handlers are usually used within form elements for a variety of reasons


Use a Selection Event (continued) ONSELECT

This event fires when the user selects text in a form element by highlighting the text

It is available with the <input> and <textarea> tags

Example


Use a Selection Event (continued) onchange

The onchange event handler fires when the user modifies the value or content of an HTML element in a form: Select Input Text area

then releases the mouse button This handler is often used to check or confirm

changes made the user


Use a Selection Event (continued)

Detect the Change of a Form Element The ability to use the onchange event handler

gives developers the ability to know if form elements have changed

This allows forms to be designed to help with complicated procedures


Advanced Use of Event Handlers

You can also use event handlers outside of HTML tags by incorporating them directly into scripts

You can also write code to manually fire many events in JavaScript without the event actually occurring

Examples


Advanced Use of Event Handlers(continued)

Returning Information from an Event Handler When you use the event handler as a method, you

basically set the value of the condition to true, which allows JavaScript to execute the associated code

You can also set the event to false this has the effect of keeping the associated code from

executing, even though the event has occurred

Example


Advanced Use of Event Handlers(continued)

Create an Event Handler Using Dot Syntax

Example

Project 8: Reacting to Events Essentials for Design JavaScript Level One Michael Brooks.

Documents