Event in JavaScript Using PHP

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">

<head>

<title>Event in JavaScript</title>

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:

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">

<head>

<title>Untitled Document</title>

<--here set your path js file-->

</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.

This is your X axis value.

This is your Y axis value.

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">

<head>

<title>Event in JavaScript</title>

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

Next, on click: