JavaScript Events
What is an Event ?
JavaScript's interaction with HTML is handled through events that occur when the user or browser manipulates a page.
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.
Developers can use these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of response imaginable to occur.
Events are a part of the Document Object Model (DOM) Level 3 and every HTML element have a certain set of events which can trigger JavaScript Code.
Please go through this small tutorial for a better understanding HTML Event Reference. Here we will see few examples to understand a relation between Event and JavaScript:
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 etcagainst this event type.
Example:
<html>
<head>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<input type="button"onclick="sayHello()" value="Say Hello" />
</body>
</html>
This will produce following result and when you click Hello button then onclick event will occur which will trigger sayHello() function.
Say Hello
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. Ifvalidate() function returns true the form will be submitted otherwise it will not submit the data.
Example:
<html>
<head>
<script type="text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
</script>
</head>
<body>
<form method="POST" action="t.cgi"onsubmit="return validate()">
.......
<input type="submit" value="Submit" />
</form>
</body>
</html>
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 theonmouseout occurs when you take your mouse out from that element.
Example:
Following example shows how a division reacts when we bring our mouse in that division:
<html>
<head>
<script type="text/javascript">
<!--
function over() {
alert("Mouse Over");
}
function out() {
alert("Mouse Out");
}
//-->
</script>
</head>
<body>
<div onmouseover="over()"onmouseout="out()">
<h2> This is inside the division </h2>
</div>
</body>
</html>
You can change different images using these two event types or you can create help baloon to help your users.
HTML 4 Standard Events
The standard HTML 4 events are listed here for your reference. Here script indicates a Javascriptfunction to be executed agains that event.
Event
Value
Description
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
ليست هناك تعليقات:
إرسال تعليق