Javascript Event

Javascript Events

The absolute coolest thing about Javascript is the ability to create dynamic web pages that increase user interaction, making the visitor feel like the website is almost coming alive right before their eyes.

Every element on a web page has certain events which can trigger JavaScript functions. For example, we can use the onClick event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.

A few example of events:

* A mouse click
* The web page loading
* Mousing over a hot spot on the web page, also known as hovering
* Selecting an input box in an HTML form
* A keystroke

Javascript has predefined names that cover numerous events that can occur, including the ones listed above. To capture an event and make something happen when that event occurs you must specify the event, the HTML element that will be waiting for the event, and the function(s) that will be run when the event occurs.
Event Handlers

New to HTML 4.0 was the ability to let HTML events trigger actions in the browser, like starting a JavaScript when a user clicks on an HTML element. Below is a list of the attributes that can be inserted into HTML tags to define event actions.

FF : Firefox, N : Netscape, IE : Internet Explorer

Attribute


The event occurs when...


FF


N


IE

onabort


Loading of an image is interrupted


1


3


4

onblur


An element loses focus


1


2


3

onchange


The content of a field changes


1


2


3

onclick


Mouse clicks an object


1


2


3

ondblclick


Mouse double-clicks an object


1


4


4

onerror


An error occurs when loading a document or an image


1


3


4

onfocus


An element gets focus


1


2


3

onkeydown


A keyboard key is pressed


1


4


3

onkeypress


A keyboard key is pressed or held down


1


4


3

onkeyup


A keyboard key is released


1


4


3

onload


A page or an image is finished loading


1


2


3

onmousedown


A mouse button is pressed


1


4


4

onmousemove


The mouse is moved


1


6


3

onmouseout


The mouse is moved off an element


1


4


4

onmouseover


The mouse is moved over an element


1


2


3

onmouseup


A mouse button is released


1


4


4

onreset


The reset button is clicked


1


3


4

onresize


A window or frame is resized


1


4


4

onselect


Text is selected


1


2


3

onsubmit


The submit button is clicked


1


2


3

onunload


The user exits the page


1


2


3