Handling Mouse Events with the jQuery JavaScript Library

Introduction

Nowadays, with the huge proliferation of reliable JavaScript frameworks, such as Prototype and Ext JS, many web developers have started incorporating these software packages into their toolboxes. They permit programmers to build full-featured client-side applications very quickly and, best of all, with minor hassles.

From an inexperienced web designer’s point of view, though, using JavaScript libraries like the ones mentioned above can be pretty intimidating, particularly when a framework requires object-oriented JavaScript programming skills to get the most out of it.

Fortunately, not all is lost when it comes to choosing a JavaScript package that provides a comprehensive programming interface for web designers. A brand new player, called jQuery, has entered the arena of professional web development. Yes, jQuery is a light-weight package of only 14 KB (compressed). Due to its adequate balance between functionality and an easy learning curve, it's  potentially attractive to many web designers, including yourself, naturally.

Speaking more specifically, in this series of articles, you’ll be provided with a concise guide to using the main features that comes packaged with the jQuery library. This way, you can get started using it when developing your own JavaScript applications.

Of course, if you already read the introductory article of this series, then it’s quite probable that you’re already familiar with using the key components of the library, like the $() function and the useful “ready()” method. To be precise, in the previous tutorial, I explained how to employ these to create a few simple JavaScript applications for displaying a couple of alert and confirm boxes when a user clicks on a link within a basic web document.

Although primitive, these practical examples demonstrated in a nutshell how easy it is to intercept mouse clicks with jQuery. Nonetheless, the library is capable of handling many other mouse events as simple as it does with clicks. Thus, in this second installment of the series, I’m going to teach you how to use the jQuery package to create JavaScript applications that respond specifically to mouse hovers and movements.

Read on to learn how to achieve all of these useful things with jQuery.