The programming which allows computations based on the activities in a browser or by the activities performed by the user on the elements in a document is known as event-driven programming.
An event is the specification (essentially an object created by the browser and JavaScript) of something significant has occurred. Examples of events are click, submit, keyup etc. In JavaScript all the event names are specified in lowercase. An event handler (essentially a function) is a set of statements (code) that handles the event.
Below table lists most commonly used events and their associated tag attributes:
| Event | Tag Attribute |
| blur | onblur |
| change | onchange |
| click | onclick |
| dblclick | ondblclick |
| focus | onfocus |
| keydown | onkeydown |
| keypress | onkeypress |
| keyup | onkeyup |
| load | onload |
| mousedown | onmousedown |
| mouseup | onmouseup |
| mousemove | onmousemove |
| mouseover | onmouseover |
| mouseout | onmouseout |
| reset | onreset |
| select | onselect |
| submit | onsubmit |
| unload | onunload |
Below table lists event attributes and their corresponding tags in HTML:
| Attribute | Tag | Description |
| onblur | <a><button><input><textarea><select> | The link looses input focusThe button looses input focusThe input element looses focusThe text area looses focusThe selection element looses focus |
| onchange | <input><textarea><select> | The input element is changed and looses focusThe text area changes and looses focusThe selection element is changed and looses focus |
| onclick | <a><input> | The user clicks on the linkThe input element is clicked |
| ondblclick | Most elements | The user double clicks the mouse left button |
| onfocus | <a><input><textarea><select> | The link acquires focusThe input element acquires focusA text area acquires focusA selection element acquires focus |
| onkeydown | <body>form elements | A key is pressed down |
| onkeypress | <body>form elements | A key is pressed down and released |
| onkeyup | <body>form elements | A key is released |
| onload | <body> | The document finished loading |
| onmousedown | Most elements | The user clicks the left mouse button |
| onmouseup | Most elements | The left mouse button is released |
| onmousemove | Most elements | The user moves the mouse cursor on the element |
| onmouseover | Most elements | The mouse cursor is moved over the element |
| onmouseout | Most elements | The mouse cursor is moved away from the element |
| onreset | <form> | The reset button is clicked |
| onselect | <input><textarea> | The mouse cursor is moved over the elementThe text is selected within the text area |
| onsubmit | <form> | The submit button is pressed |
| onunload | <body> | The user exits the document |
The process of linking an event handler with an event is known as registration. There are two ways to register an event handler in DOM 0 event model. First way is by assigning the event handler script to an event tag attribute as shown below:
|
1 2 3 |
<input type="button" value="Click Me" onclick="func1( );" /> |
In the above code, the event handler func1 is assigned to the event attribute onclick of a button.
The second way is by assigning the event handler to the event property of the element as shown below:
|
1 2 3 |
document.getElementById(ID_of_element).onclick = func1; |
Take your time to comment on this article.
