Monday 20 February 2017

Java Script Event


Java Script Event

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