2 of 24

Event - Definition

Events are actions that can be detected by JavaScript.
Every element on a web page has certain events which can trigger JavaScript functions
Examples of events:

A mouse click
A web page or an image loading
Moving over a hot spot on the web page
Selecting an input box in an HTML form
Submitting an HTML form
A keystroke

Note: Events are normally used in combination with functions, and the function will not be executed before the event occurs! List of Events handler

3 of 24

onload Event

The onload event occurs immediately after a page or an image is loaded.
Syntax:

onload="SomeJavaScriptCode"�

This event is often used to check the visitor's browser type and browser version, and load the proper version of the web page based on the information

4 of 24

onload Event

It isSupported by the following HTML tags:

Supported by the following JavaScript objects:

image, layer, window�

5 of 24

JavaScript onunload Event

The onunload event occurs when a user exits a page.
Syntax

onunload="SomeJavaScriptCode“

It is supported by following
HTML tag - <body>,<frameset>
JavaScript Object - window

6 of 24

Java Script onfocus Event

The onfocus event occurs when an object gets focus.
Syntax

onfocus="SomeJavaScriptCode“

It is supported by
All the form related HTML tags
Form related JavaScript Objects.

7 of 24

Java Script onblur Event

The onblur event occurs when an object looses the focus.
Syntax

onblur="SomeJavaScriptCode"�It is supported by

All the form related HTML tags
Form related JavaScript Objects.

8 of 24

Java Script onchange Event

The onchange event occurs when the content of a field changes.
Syntax

onchange="SomeJavaScriptCode“

It is supported by
<input type="text">, <select>, <textarea> tags
fileUpload, select, text, textarea Objects

9 of 24

Java Script onselect Event

The onselect event occurs when text is selected in a text or textarea field.
Syntax

onselect="SomeJavaScriptCode“

It is supported by the following

<input type="text">, <textarea> tags.
text, textarea Objects.

10 of 24

Java Script Mouse Events

onmousedown Event
onmouseup Event
onmousemove Event
onmouseout Event
onmouseover Event

11 of 24

JavaScript onmousedown/onmouse up Event

onmousedown Event

It occurs when a mouse button is clicked.

Syntax :

onmousedown="SomeJavaScriptCode“

onmouseup Event

It occurs when a mouse button is released.

Syntax

onmouseup="SomeJavaScriptCode“

12 of 24

Java Script Mouse Events�(mouseup and mousedown events)

Supported by the following HTML tags:

<a>, <body>, <button>, <form>, <h1> to <h6>, <hr>, <img>, <input>, <select>, <textarea>.

Supported by the following JavaScript objects:

button, document, link�

13 of 24

Java Script onmouseout/ onmouseover Event

onmouseout Event

It occurs when the mouse pointer moves away from a specified object.

Syntax

onmouseout="SomeJavaScriptCode“

onmouseover event

It occurs when the mouse pointer moves over a specified object.

Syntax - onmouseover="SomeJavaScriptCode"

14 of 24

Java Script Mouse Events�(mouseover and mouseout events)

Supported by the following HTML tags:

<a>, <body>, <button>, <form>, <h1> to <h6>, <hr>, <img>, <input>, <select>, <textarea>.

Supported by the following JavaScript objects:

link and layer�

15 of 24

Java Script onmousemove Event

It occurs when the mouse pointer is moved.
Syntax

onmousemove="SomeJavaScriptCode“

It is supported by all the HTML tags and JavaScript objects.

16 of 24

JavaScript KeyEvents

onkeydown Event

onKeyUp Event

onkeypress Event

17 of 24

JavaScript onkeydown/ onKeyUp Event

onkeydown Event
It occurs when a keyboard key is pressed.
Syntax

onkeydown="SomeJavaScriptCode“

onkeyup Event
It occurs when a keyboard key is released.
Syntax

onkeyup="SomeJavaScriptCode“

18 of 24

JavaScript onkeypress Event

It occurs when a keyboard key is pressed or held down.
Syntax

onkeypress="SomeJavaScriptCode“

Parameter

SomeJavaScriptCodeRequired - Specifies a JavaScript to be executed when the event occurs.

19 of 24

JavaScript KeyEvents

Supported by the following HTML tags:

<a>, <acronym>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <q>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

document, image, link, textarea�

20 of 24

Javascript - onsubmit event

The onSubmit event is used to validate ALL form fields before submitting it.
• Example: The checkForm() function will be called when the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled. The function checkForm() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled:
Example :

<form method="post" action="xxx.html"

onsubmit="return checkForm()">

21 of 24

Javascript - onreset event

It occurs when the reset button in a form is clicked.
Syntax

onreset="SomeJavaScriptCode“

It is supported only by the <form> tag and Javascript form object.

22 of 24

Javascript - onclick event

It occurs when an object gets clicked.
Syntax

onclick="SomeJavaScriptCode“

Parameter

SomeJavaScriptCodeRequired.- Specifies a JavaScript to be executed when the event occurs.

23 of 24

Javascript - onclick event

Supported by the following HTML tags:

<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>, <form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <object>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>

Supported by the following JavaScript objects:

button, document, checkbox, link, radio, reset, submit

24 of 24

�Javascript - onabort Event�

It occurs when loading of an image is aborted.
Syntax

onabort="SomeJavaScriptCode”

It is supported by <img> tag and img Javascript object.