CS114 JAVASCRIPT EVENTS
1.0 JavaScript Events
• Events are actions that take place in a document, such as
clicking on a button or selecting a text.
• Event handlers are JavaScript-related HTML attributes that
modify the behavior of a document.
• JavaScript event handlers can be divided into the following
categories
o System Events
o Mouse Events
o Data Entry Events
2.0 System Events
Events that don’t require user interaction. For example the
onloading and unloading of a web page. These events are
written in the BODY tag.
onLoad
Is activated after the HTML page is completed
loaded
onUnload
Is activated when the user exits a HTML page.
9-1
JAVASCRIPT EVENTS CS114
3.0 Sample Codes for System Events
4.0 Mouse Events
Mouse Events will require user interaction in order to be
triggered. They have to do with mouse movements and mouse
clicks.
onClick
Is activated when the user clicks an object that
accepts such an event. For example, clicking on a
radio button.
onMouseOver
Occurs when the mouse crosses over an object.
For example over a hyperlink or an image.
onMouseOut
Occurs when the mouse leaves an object.
9-2
CS114 JAVASCRIPT EVENTS
5.0 Sample Codes for Mouse Events - onMouseOver Event
6.0 Sample Codes for Mouse Events - onMouseOut Event
9-3
JAVASCRIPT EVENTS CS114
7.0 Data Entry Events
Events Data entry events will require user interaction to be
triggered. They happen when the user attempts to change or
submit the contents of a HTML form.
onFocus
Occurs when an objects is selected. Can be used only with text,
text area, password and select objects.
onBlur
Occurs when an object is no longer in focus. Applies to text,
textarea, password and select objects.
onChange
Is activated whenever an object has lost focus and it’s value has
been changed. Applies to text, textarea, password and select
objects.
onSelect
Event occurs when the user highlights text in a text, text area or
password object.
onSubmit
Is used with form object. Occurs when a user submits a form.
onReset
Counterpart to OnSubmit. Occurs when the user clicks the Reset
button.
8.0 Sample Codes for Data Entry Events - onFocus Event
9-4
CS114 JAVASCRIPT EVENTS
9.0 Sample Codes for Data Entry Events - onBlur Event
10.0 Sample Codes for Data Entry Events - onChange Event
9-5
JAVASCRIPT EVENTS CS114
11.0 Sample Codes for Data Entry Events - onSelect Event
12.0 Sample Codes for Data Entry Events - onSubmit Event
9-6
CS114 JAVASCRIPT EVENTS
13.0 Sample Codes for Data Entry Events - onReset Event
14.0 Bibliography
• JavaScript (Introductory) By Dan Gosselin
9-7