DOM Traversal Methods

[ 117 ]
Chapter 5
Description
This handler is a shortcut for .bind('mousemove', handler) in the first variation,
and .trigger('mousemove') in the second.
The mousemove event is sent to an element when the mouse pointer moves inside the
element. Any HTML element can receive this event.
For example, consider the HTML:
Move Here
Trigger
The event handler can be bound to the target button:
$('.target').mousemove(function() {
$(this).log('Mousemove event was triggered.');
});
Now when the mouse pointer moves within the target button, the message is
displayed. We can also trigger the event when the second button is clicked:
$('.trigger').click(function() {
$('.target').mousemove();
});
After this code executes, clicking the Trigger button will also display the message.
When tracking the mouse movement, we usually clearly need to know the actual
position of the mouse pointer. The event object that is passed to the handler contains
some information about the mouse coordinates. Properties such as .clientX,
.offsetX, and .pageX are available, but support for them differs between browsers.
Fortunately, jQuery normalizes the .pageX and .pageY attributes so that they can be
used in all browsers. These attributes provide the X and Y coordinates of the mouse
pointer relative to the top-left corner of the page.
We need to remember that the mousemove event is triggered whenever the mouse
pointer moves, even for a pixel. This means that hundreds of events can be generated
over a very small amount of time. If the handler has to do any significant processing,
or if multiple handlers for the event exist, this can be a serious performance drain on
the browser. It is important, therefore, to optimize mousemove handlers as much as
possible, and to unbind them as soon as they are no longer needed.