Html Events
Html supports certain kinds of events that can trigger an action or script.
Events are very useful when we want a script to run only when some kind of condition is met. Such as, when we click on something or when we move our mouse pointer over something.
Events are very useful for creating dynamic effects such as, rollover buttons or dynamic menus.
Using Events
Events are associated with elements by using certain attributes with that element.
Example
There is an event called "onclick" which triggers a script when a mouse is clicked. If we want to associate this event with an element say an anchor <a>, we can do it like this,
<a href="#" onclick="alert('Hello World')">Click</a>
Here onclick is assigned a javascript function alert which open an alert box and displays the text provided. Click the anchor below to see the result.
You can use it with other elements as well.
More Events
There are other useful events also which you can use with certain elements. They are given in the table along with their function below.
| Event | Description |
| onclick | Triggers when the mouse in clicked. |
| ondblclick | Triggers when the mouse is double clicked. |
| onmousemove | Triggers when the mouse pointer is moved over the element. |
| onmouseover | Triggers when the mouse pointer is positioned over the element. |
| onmouseout | Triggers when the mouse pointer is moved out of the element. |
| onmousedown | Triggers when the mouse button is pressed down. |
| onmouseup | Triggers when the mouse button is released |
| onload | Triggers when the page loads. Used with <body> tag. |
| onunload | Triggers when the page unloads. Used with the <body> tag. |
| onselect | Triggers when some text is selected a form element. |
| onfocus | Triggers when an element is selected or brought to focus. |
| onblur | Triggers when an element already in focus is unselected or left. |
| onsubmit | Triggers when the visitor presses the submit button in a form. |
| onreset | Triggers when the visitor presses the reset button in a form |
| onchange | Triggers when the visitor changes a value in a form element. |
| onkeypress | Triggers when a character is typed in a form element. |
| onkeydown | Triggers when a key is pressed down. |
| onkeyup | Triggers when a key already pressed down is released. |
Next :
Related:
Link to this page :
Copy and paste the following code in an html document to link to this page,