Introduction
This article explains events in JavaScript using PHP. I explain this tutorial using JavaScript events and find X-axis and Y-axis values. This is a very interesting example in this article. You can easily find the X-axis and Y-axis values. Now let's proceed to how to use it.
Example
First of all you will create two text boxes to use HTML and the next one is to create a JavaScript function in the head section. You can see the function below for moving the X-axis and Y-axis values. Move both text box values using the "onmousemove" event.
<!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; Charest=iso-8859-1" />
<title>Event in JavaScript</title>
<script type="text/JavaScript">
document.onmousemove = call;
function call(evnt)
{
document.getElementById("x").value = evnt.clientX;
document.getElementById("y").value = evnt.clientY;
}
</script>
</head>
<body>
<form>
X axis:<input type="text" id="x"><br/>
Y axis:<input type="text" id="y">
</form>
</body>
</html>
The most proper way to do this is to make the HTML and JavaScript files separate. You can create the JavaScript file with the name "event.js".
document.onmousemove=call;
function call(evnt)
{
document.getElementById("x").value=evnt.clientX;
document.getElementById("y").value=evnt.clientY;
}
And this is your HTML file saved with the "form.js" name. This is a proper way to work with both files separate. Sometimes this does not work in Internet Explorer;if so then you can write this code:
<body onmousemove="call(event)">
That does not use "evnt" it uses "event". Then to do it the proper way you three measure browser Mozilla Firefox, Google chrome, and Internet Explorer.
<!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>Untitled Document</title>
<--here set your path js file-->
<script type="text/JavaScript" src="evnt.js">
</script>
</head>
<body>
<form>
X axis:<input type="text" id="x"><br/>
Y axis:<input type="text" id="y">
</form>
</body>
</html>
Output
The following values show when the mouse moves. Mouse over the browser above, and get the coordinates of your mouse pointer.
This is your zero axis value.
![evnt.jpg]()
This is your X axis value.
![evnt1.jpg]()
This is your Y axis value.
![evnt2.jpg]()
Example
I provide this example to explain the "onclick" event.
<!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; Charest=iso-8859-1" />
<title>Event in JavaScript</title>
<script type="text/JavaScript">
document.onclick = call;
function call(evnt)
{
document.getElementById("x").value = evnt.clientX;
document.getElementById("y").value = evnt.clientY;
}
</script>
</head>
<body>
<form>
X axis:<input type="text" id="x"><br/>
Y axis:<input type="text" id="y">
</form>
</body>
</html>
Output
![evnt4.jpg]()
Next, on click:
![evnt5.jpg]()