As with JavaScript, jQuery supports a lot of events. Events are methods that can be attached to HTML elements. If you want to add a click event, change event, or double-click event, it is really easy with jQuery. In this article, we will explore many of these events and the ways to apply them to your objects.
jQuery events can be categorized as mouse events, form events, browser events, keyboard events, event handlers, and document events. We will focus on mouse events in this article and expand on the others in future articles.
Mouse events are events that have to do with actions of the mouse. These can be a click, double-click, mouse down, etc. Mouse events can be used in two different ways. The first way is to bind the click handler to the HTML element. The other is to call the click event within the jQuery code.
At the end of this article is the sample code. We will walk through some of the code while explaining the various mouse events.
Before jQuery
To add an event using JavaScript, you would create the JavaScript code to be called and add the event to the HTML object. An example:
<html>
<head>
<script type="text/javascript">
function callme() {
alert("Hello");
}
</script>
</head>
<body>
<p><input type="button" value="Click Me" onclick="callme()" /></p>
</body>
</html>
The above example has a JavaScript function called "callme" and a button that has an onclick event. When the button is pressed, the onclick event calls the JavaScript function to display an alert box. This is a pretty simple example. Let’s look at the same example using jQuery:
<html>
<head>
<script type="text/javascript" src="https://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#ClickMe").click(function () {
alert("Hello");
});
});
</script>
</head>
<body>
<p><input type="button" value="Click Me" id="ClickMe" /></p>
</body>
</html>
First, we added in the jQuery library and the "(document).ready" function. Next, we gave the button an ID so we could reference it from jQuery. In the jQuery code, you can see we added a ".click" event. Instead of adding an "onclick" event to the button directly, we add it in the jQuery code. jQuery will attach the event to the button automatically.
Now, let’s look at some of the mouse events.
Click Event
The click handler adds the click event to the HTML element like this:
.click(function() { put function calls in here });
When this is added to the HTML element, the function will fire when the mouse pointer is over the object and the mouse button is pressed and released. Of course the other way to use this is to call the function directly like so:
.click();
jQuery code from the sample:
$("#SingleClick").click(function () {
alert("Single Click");
});
HTML from the sample:
<div class="button" id="SingleClick">Single Click Me</div>
As you can see, we have a div element on the page. The jQuery code attaches a click event to the div element. When it is single clicked, an alert box is displayed.
Double-Click Event
The double-click handler adds a double-click event to the HTML element like so:
.dblclick(function() { put function calls in here });
This event fires when the mouse button is pressed and released two times within a certain time (this time depends on the system). And like the click event, it can be called directly:
.dblclick();
jQuery code from the sample:
$("#DoubleClick").dblclick(function () {
alert("Double Click");
});
HTML from the sample:
<div class="button" id="DoubleClick">Double Click Me</div>
As with the click event, we have a div element on the page that has a jQuery double-click event attached. When the div is double-clicked, an alert box is displayed.
Mouse Button Down
This event will fire as soon as the mouse button is pressed. Unlike the click event, it does not wait for the button to be depressed. This can be used in place of the click event when you want to have the event fire as soon as the button is pressed. Another use for this is if you have implemented drag operations. This event would fire when the button is clicked and held.
Here is the syntax:
.mousedown(function() { put function calls in here });
There is also a way to use this to determine which button is clicked. You need to use the event objects "which" property. The value should be 1 for left, 2 for middle, and 3 for right. Not all browsers support this, but jQuery handles this to make it work. Why would you need this? This allows you to ensure which button is pressed. You could use it to create a right-click context menu or to ensure the left button is pressed while dragging. Here is how that works:
$("#MouseDown").mousedown(function (b) {
alert(b.which);
});
As you can see, we added an event object "b" to the function. Using the "which" property, we can see which button was pressed. Try using different buttons when clicking on the "Mouse Button Down" div from the sample code:
<div class="button" id="MouseDown">Mouse Button Down</div>
Mouse Button Up
Just like the mouse button down event, the mouse button up event will fire when the mouse button is released and not when it is pressed. Also, you can determine which button is pressed by using the "which" property just like the mousedown event.
The mouse button up syntax is:
.mouseup(function() { put function calls in here });
Mouse Move
The mouse move event tracks the movement of the mouse pointer within a HTML element. As the mouse pointer is moved within the HTML element, the event is fired. You can use this to track the mouse pointer coordinates as well.
Here is the syntax:
.mousedown(function() { put function calls in here });
jQuery code from the sample:
$("#MouseMove").mousemove(function (c) {
$(this).html("Mouse is moving. Coordinates are " + c.pageX + " by " + c.pageY);
});
HTML from the sample:
<div class="button" id="MouseMove">Mouse Move</div>
As you can see, we are binding the mouse move event to a DIV element. When the mouse pointer is moved within this element, we are updating the HTML inside the DIV element and displaying the coordinates of the pointer.
Mouse Over
The mouse over event fires when the mouse pointer enters the HTML element. This is very similar to the mouse enter event. The syntax for the mouse over event is:
.mouseover(function() { put function calls in here });
jQuery code from the sample:
$("#MouseOver").mouseover(function () {
$(this).fadeOut();
$(this).fadeIn();
});
HTML from the sample:
<div class="button" id="MouseOver">Mouse Over</div>
