JQuery & AJAX Mouse Event Handler’s

I forgot to cover in depth mouse event handler’s in the last presentation. If you add the following code to my previous JQuery & AJAX tutorial on Event Handler’s, we should be good to go.

You just need to add a little bit of code to implement mouse event handler’s. Change the code where I assign event handler’s to the body to this:

$(‘#theBody’).bind(‘keyup’,checkKeyPressed).bind(‘mousemove’,theMouseMoved);

This binds the mouse move event handler to the whole web page. Now anytime the mouse moves, the theMouseMoved() function will be called. That function also needs to be added, and looks like this:

function theMouseMoved(event)
{
$(“#seventh”).html(event.screenX);
$(“#ninth”).html(event.screenY);
}

This code will change the text in the paragraphs named “seventh” and “ninth”, every time the mouse moves. Make sure you pass it the event attribute, like I did here. The variable event.screenX and event.screenY, contain the current value of the x and y coordinate’s of the cursor. Then add these new span’s and your done:

<div>
<p><strong>Mouse Movements on the Page:</strong></p>
<span id=”sixth”>Mouse X Coordinate:</span>
<span id=”seventh”>Waiting for Change</span><br />
<span id=”eighth”>Mouse Y Coordinate:</span>
<span id=”ninth”>Waiting for Change</span>
</div><br />

This HTML should be self explanatory. Thanks to everyone who alerted me to my mistake. If you want to see any other subject’s covered leave me a comment below.

Here to Serve

Think Tank

Leave a Reply

Your email address will not be published.

Google+