Event is any action done by a user on a webpage. When a user interacts with a webpage, her actions trigger some events. JavaScript events can be defined as actions in a browser. Code snippets called scripts can be included in the HTML page to respond to the JavaScript Events.
Every physical action by a user like Click, Load, Mouseover, Mouseout, Mousemove etc is an event. The scripts written to execute when an event occurs is called an event handler. It is written as an attribute of a specific HTML element which you want to respond to user action. It is the name of the event preceded by “on”. For example onchange is written as an attribute of a textbox. The value of this attribute will be the JavaScript function that you wish to execute when the user types something in the textbox.
Categories of JavaScript Events
JavaScript Events can be categorized on the basis of where they will be triggered from.
Mouse Events
All actions that the users do with a mouse are defined under this category. User can click, double click, move, press mouse button down or release it.
- onclick- This event will be triggered when a user presses the mouse button and releases it completing the click process on an interface element.
- ondblclick- This event will be triggered when a used double clicks the mouse button.
- onmousedown- This event will be triggered when the user presses the mouse button down and has not yet released it.
- onmouseup- This event will be triggered when the user releases a mouse button after being pressed down for some moments.
- onmouseover- This event will be triggered when the user brings the mouse cursor over an HTML element in a webpage.
- onmousemove- This event will be triggered when the user moves the mouse cursor in a webpage.
- onmouseout- This event will be triggered when the user moves the mouse cursor out of an element in an HTML webpage
Keyboard Events
All the actions that the users do with a keyboard are defined under this category. Use can press a key, release a key.
- onkeypress- This event will be triggered when the user presses and releases a key from the keyboard.
- onkeydown- This event will be triggered when the user presses a key down from the keyboard.
- onkeyup- This event will be triggered when the user releases a pressed key from the keyboard
User Interface Events
These events occur when some action is done by the user on the elements of the user interface. These usually represent the movement of cursor between different elements of a webpage.
- onfocus- This event will be triggered when a user sets focus on an HTML element using the keyboard or mouse. This usually happens when user presses ‘tab’ key to set focus on an element to enter text or select an option from radio buttons, check boxes or combos. It represents the current active HTML element on the document.
- onblur- This is the opposite of onfocus event. This event will be triggered when a user moves to one element from another element. User can do so with the keyboard or mouse. The previous element loses focus (blurs) and the next element gets the focus.
HTML Events
All the events that are related to the complete web page activities are defined as HTML events.
- onload- This event is triggered when the complete page/document is loaded in the requesting user browser.
- onunload- This event is triggered just before the page/document starts to get unloaded from the user browser. This is when the user closes a page in browser.
- onsubmit- This event is triggered when the user submits the data of a web form by clicking on the submit button.
- onreset- This event is triggered when the user resets the a web form by clicking on the reset button. Reset action clears all the data from text boxes, text areas and select option and leaves the pages in its initial status.
- onselect- This event is triggered when the user selects some text in a textbox, select or textarea elements in a web document.
- onchange- This event is triggered when the user changes value of HTML form elements textbox select or textarea elements in a web document.
Syntax using JavaScript events
A JavaScript event can be called by specifying it as an attribute with HTML tag for a form element.
<HTML TAG [OTHER ATTRIBUTES] event-handler=”function-name([parameters]”>
Example
<IMG SRC=”icon.jpg” NAME=”icon” ondblclick=”changeIcon()”>