Home arrow JavaScript arrow Page 5 - Understanding The JavaScript Event Model (part 2)

Enter The Stalker - JavaScript

In this concluding article on the JavaScript event model, findout how the Event object can be used to do ever more complex things,including manipulating the dimensions of a Web page and tracking andintercepting keyboard and mouse events.

  1. Understanding The JavaScript Event Model (part 2)
  2. Back To Basics
  3. How's The Weather Up There?
  4. X Marks The Spot
  5. Enter The Stalker
  6. Of Keys And Clicks
  7. A Few Modifications
  8. Tonight's Menu
  9. Reducing The Crime Rate
  10. Endgame
By: Team Melonfire, (c) Melonfire
Rating: starstarstarstarstar / 32
July 10, 2002

print this article


Here's another example, this one demonstrating how the current coordinates of the mouse pointer can be exploited to create a simple mouse trail. Take a look at the following example, which has a text string closely following the mouse pointer as it travels across the screen.

<script language="JavaScript"> 
function mouseTracker()
document.all.rock_n_roll.style.left = event.x + 20;
document.all.rock_n_roll.style.top = event.y + 20;
<div id="rock_n_roll" style="font-family:Arial; font-size: xx-small;
position:absolute; visibility:hidden; background:black; color:
white;">Why are you following me?</div>
In this case, every time the mouse is moved, an event is generated and the mouseTracker() function is invoked. This function receives the current X and Y coordinates of the mouse pointer; it then uses these coordinates to move the layer containing the text string to a location 20 pixels behind the pointer.

Here's the Netscape version of the example above - as you can see, it does exactly the same thing, except that it uses the "pageX" and "pageY" properties instead of the "x" and "y" properties.
<script language="JavaScript"> 
function mouseTracker(e)
document.rockroll.pageX = e.pageX + 20
document.rockroll.pageY = e.pageY + 20
<div id="rockroll" style="position:absolute; visibility:hidden;
background:black; color:white;"><font face="Arial" size="-2">Why are you
following me?</font></div>

>>> More JavaScript Articles          >>> More By Team Melonfire, (c) Melonfire

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort


- Javascript for Beginners: An Introduction
- Introduction to JavaScript
- Adding Elements to a Tree with TreeView jQue...
- Using the Persist Argument in a TreeView jQu...
- Using Unique and Toggle in a TreeView jQuery...
- Using Event Delegation for Mouseover Events ...
- Using the Animate Option in a Treeview jQuer...
- Using HTML Lists with Event Delegation in Ja...
- Opened and Closed Branches on a TreeView jQu...
- Mouseover Events and Event Delegation in Jav...
- Creating a TreeView JQuery Hierarchical Navi...
- Event Delegation in JavaScript
- A Look at the New YUI Carousel Control
- Working with Draggable Elements and Transpar...
- Displaying Pinned Handles with Resizable Con...

Developer Shed Affiliates


Dev Shed Tutorial Topics: