Thursday 2 June 2011

Event Attributes in JavaScript



Event : Event is an object and it refers the properties of current action.
ClintX: By using this function we can get the X axes of the mouse cursor.
Clinty: By using this function we can get the Y axes of the mouse cursor.
These properties are available with mouse related events.
Sample Script :
<script>
function fun1(e)
{
xpos=e.clientX
ypos=e.clientY
document.getElementByid('div1').innerHTML="X is"+xpos+"Y is"+ypos
document.getElementByid('img1').style.left=xpos
document.getElementByid('img1').style.top=ypos
}
</script>
<body onmousemove="fun1(event)">
<div style="color:red" id="div1">Click</div>
<img src="
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS6oNWwtFulFSEw5cS9nP6yDO5H20wdFL7Zj7ucIiP5PWy533y2-KXiDZnKAlj3SqLGboptTEHlerC-3xG-E8FIspbTUn9pxuwOerO3Qjtp1ut0LgA4ez54YcRJkGsSmmqq8X0t5S47S0w/s1600/Windows+XP+Troubleshooting.gif" width="50" style="position:absolute"
id="img1">
</body>
By using above script we can get the x and y values of mouse cursor.
Event.type:  It returns the type of event.
Event.button : It returns the numeric value based on the selected button of mouse. If user click on he left button then the value is one. If it is right button then the value is 2 as well as in center then the value is 4.
Sample Script :
<script>
function fun1(e)
{
if(e.button==2)
alert("You Connont Copy PHP Tutorial Notes Here")
}
</script>
<body>
<img src="file:///C|/xampp/htdocs/2.JPG" width="100" onmousedown="fun1(event)">
</body>
Event.Keycode: This property adds the unique code value of input characters.
Sample Script :
<script>
function fun1(e)
{
document.getElementByid('div').innerHTML="";
code=e.keyCode
if(code !=8)
{
document.getElementByid('div1').innerHTML="Enter Numbers";
return false;
}}}
</script>
<body>
Age<input type="text" onkeydown="return fun1(event)" maxlength="2">
<div id="div1" style="color:red">
</div>
</body>


0 comments:

Post a Comment