What is an Event ?
When the page loads, that is an event. When the user clicks a button, that click, too, is an event. Another example of events are like pressing any key, closing window, resizing window etc.
onclick Event Type:
This is the most frequently used event type which occurs when a user clicks mouse left button. You can put your validation, warning etc against this event type.
This will produce following result and when you click Hello button then onclick event will occur which will trigger sayHello() function.
onsubmit event type:
Another most important event type is onsubmit. This event occurs when you try to submit a form. So you can put your form validation against this event type.
Here is simple example showing its usage. Here we are calling a validate() function before submitting a form data to the webserver. If validate() function returns true the form will be submitted otherwise it will not submit the data.
onmouseover and onmouseout:
These two event types will help you to create nice effects with images or even with text as well. The onmouseover event occurs when you bring your mouse over any element and the onmouseout occurs when you take your mouse out from that element.
Following example shows how a division reacts when we bring our mouse in that division:
You can change different images using these two event types or you can create help baloon to help your users.
HTML 4 Standard Events
|onchange||script||Script runs when the element changes|
|onsubmit||script||Script runs when the form is submitted|
|onreset||script||Script runs when the form is reset|
|onselect||script||Script runs when the element is selected|
|onblur||script||Script runs when the element loses focus|
|onfocus||script||Script runs when the element gets focus|
|onkeydown||script||Script runs when key is pressed|
|onkeypress||script||Script runs when key is pressed and released|
|onkeyup||script||Script runs when key is released|
|onclick||script||Script runs when a mouse click|
|ondblclick||script||Script runs when a mouse double-click|
|onmousedown||script||Script runs when mouse button is pressed|
|onmousemove||script||Script runs when mouse pointer moves|
|onmouseout||script||Script runs when mouse pointer moves out of an element|
|onmouseover||script||Script runs when mouse pointer moves over an element|
|onmouseup||script||Script runs when mouse button is released|