“Browser throws object automatically whenever an event occurs.” This is true with most browsers, except Microsoft’s Internet Explorer.
To solve the browser incompatibility and to make our programs work the same way in all major browsers(including Internet Explorer – IE ), we need to write the coding with little smartness!
What does this program do?
Here we will track the users cursor movement and display the X and Y axis of the cursor position in the browser window.
We will make use of onmousemove event and clientX and clientX properties.
We will also show how to catch the event objects and make proper use of them and how to handle a situation when the event object is not passed automatically.
HTML Code:
Here we have taken a form with two empty input tags. Latter with the help of javascript program we will fill the value of these empty input html tags.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <html> <head> <title> Events In Javascript </title> <script type="text/javascript" src="event.js"></script> </head> <body> <form> X axis: <input type="text" id="x"><br /> Y axis: <input type="text" id="y"> </form> </body> </html> |
To link our html and the javascript files, we need to write this code in the head tag of html file:
<script type="text/javascript" src="event.js"></script> |
Javascript code:
1 2 3 4 5 6 7 8 9 10 11 12 |
document.onmousemove = call;
function call(evnt) {
if( !evnt )
evnt = window.event;
document.getElementById("x").value = evnt.clientX;
document.getElementById("y").value = evnt.clientY;
} |
Here, when we move our mouse over the html document, call() function is invoked.
If the event object is not automatically passed by the browser i.e., if the browser is internet explorer, then we manually assign the event to evnt object using below code:
if( !evnt ) evnt = window.event; |
With clientX and clientY property of the event object, we will assign the x axis and y axis value to the empty input tags using its id.
“Browser throws object automatically whenever an event occurs.” This is true with most browsers, except Microsoft’s Internet Explorer. ”
Since when did you come to know what is true and what is not ?!
It’s the other way around, completely! The event object exists only in explorer and is available at all times. And only Netscape broods don’t have it.
“to make our programs work the same way in all major browsers(including Internet Explorer – IE )”
(You filthy piece of shit, “including IE!?”) – IE e >>is<< the Major of them all!
And since the event object exist in solely in Explorer,
your silly code for IE and other true to the web browsers should look like this:
html
X axis:Y axis:[and since your input elements here, are used to display data as any other plain html element would, you dont need a form: because it isn’t!]
script
document.onmousemove = showMouseCoords;function showMouseCoords(){x.value = event.x;
y.value = event.y;
}
End
This is how it should work in all minor minor browsers including Fx and this is just one of a myriad examples of, how easy, strait-forward, clean, efficient and fun our coding would be if only there would be no more loud and illiterate scumbags like IE…