Java script is a scripting language intended to handle event, rise from different controls of HTML. If you want to learn java script then you need to first learn about event.
An event is generated by a control,page or any other type of
activity . Event is generated through user, software, browser,server etc. with
the help of event system acknowledge that
something is happening . Example of
different types of events are click,double click,mouse over , mouse out etc.
When an event is generated an event handler is require to capture that particular event. I have added some example of most fundamental event
in following code. After that you will be able handle some important event .
Java Script Event Demo
Double click on me
Focus and blur event demo :
Keypress : Keyup :
<span id="s1"></span>
Full Code
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Girfa : Student Help Java Script Event</title>
<style>
input[type="button"]
{
margin-left:20px;
background-color:#009999;
padding:15px 15px;
border:none;
color:#FFFFFF;
border-radius:5px;
cursor:pointer;
}
input[type="button"]:hover
{
color:yellow;
}
</style>
<script language="javascript">
function clicke()
{
alert("Mouse Click
Event");
}
function dbclicke()
{
alert("Mouse Double
Click Event");
}
function hovere()
{
alert("Mouse Hover
Event");
}
function oute()
{
alert("Mouse out
Event");
}
</script>
</head>
<body>
<h1 align="center">
Java Script Event Demo</h1><hr />
<input type="button"
value="Click on
me" ondblclick=""=""="clicke()" />
<input type="button"
value="Put Mouse
on me" onmouseover="hovere()"/>
<input type="button"
value="Put and
Remove Mouse on me" onmouseout="oute()"/><br
/>
<p style="border:solid
1px red;width:100px" ondblclick="dbclicke()">Double click on me </p><br /><br />
Focus and blur event demo
: <input type="text" value="Enter keyword for
Search " style="color:#CCCCCC" onfocus="this.value=''" onblur="this.value='Enter keyword for Search '" /><br /><br />
Keypress : <input type="text" onkeypress="s1.innerHTML='Keypress
Event Called'"/>
Keyup : <input type="text" onkeyup="s1.innerHTML='Keyup
Event Called'"/><br /><br />
</body>
</html>
No comments:
Post a Comment