Handling Mouse Events with the jQuery JavaScript Library
Welcome to the second part of a multi-part series that introduces you to the jQuery JavaScript library. In this article, I will provide you with a quick overview of how to handle the “mouseup” and “mousemove” events with the jQuery package.
Handling Mouse Events with the jQuery JavaScript Library - Review: the “$()” function and the “ready()” method (Page 2 of 4 )
As I said in the beginning, the “jQuery” library allows you to unobtrusively assign different event handlers to targeted elements of a web page. In most cases, this event assignment is carried out by means of its two primary components, that is the $()” function and the “ready()” method.
Concretely speaking, the $() function can be used to access any element within the web page’s DOM, while on the other hand, the “ready()” method is utilized to execute portions of code after the whole web page has been loaded.
But you'll better understand the way that these components actually work if you examine the following examples, excerpted from the previous tutorial:
(example on using click event with jQuery)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
As you’ll recall, each of the above examples demonstrates how to use the $() function in conjunction with the aforementioned “ready()” method to intercept a few mouse clicks and display a couple of alert and confirm boxes in response. You should also notice that for all of these cases, the JavaScript code that adds different behaviors to selected web page elements is placed outside the structural markup, thus implementing it in a truly unobtrusive manner.
Well, at this point you've hopefully recalled how to fire up a predetermined function when a user clicks on a specific web page element. But, as you may guess, the jQuery package allows you to handle other mouse events with the same ease.
Therefore, assuming that you’re interested in learning the full details on this topic, in the following section I’m going to show you how to trigger a specified function in response to a “mouseup” event.
To see how this process will be performed with jQuery, please read the next few lines.