jQuery & Events
Jakob Jenkov |
JQuery makes it easy to respond to events in your HTML page. For instance, executing some JavaScript code when the mouse enters (is above) a certain HTML element, when the mouse leaves, when the mouse button is clicked etc.
Here is a list of the most commonly used events, which JQuery can help you handle. Actually, it is a list of JQuery functions for attaching event handlers for the corresponding events.
- $(document).ready()
- click()
- dblclick()
- mouseenter()
- mouseleave()
- mouseover()
- mouseout()
- mousedown()
- mouseup()
- mousemove()
- hover()
- toggle()
- focus()
- blur()
- keydown()
- keyup()
- keypress()
Each of these functions are explained in the sections below.
$(document).ready()
The $(document).ready() function enables you to execute a function when the document is fully loaded.
This event is explained in a little more detail in the text JQuery $(document).ready(),
so I will not get into more detail about that function here.
click()
The click() function attaches an event handler function to an HTML element, which is executed when
the user clicks the HTML element. Here is an example:
<script type="text/javascript">
$(document).ready(function() {
$('#theDiv').click(function() {
alert("Div clicked");
});
});
</script>
<div id="theDiv">Click this div!</div>
The example selects the div element with the id theDiv, and
attaches a click handler function to it. When the div is clicked, the click handler function is
executed.
dblclick()
The dblclick() function works just like the click() function, except it reacts
to double clicks instead of single clicks.
mouseenter()
The mouseenter() function attaches an event handler function to an HTML element, which
is executed when the mouse pointer enters the HTML elements area on the page. Here is an example:
<script type="text/javascript">
$(document).ready(function() {
$('#theDiv').mouseenter(function() {
alert("Div entered");
});
});
</script>
<div id="theDiv">Enter this div!</div>
mouseleave()
The mouseleave() function attaches an event handler function to an HTML element, which
is executed when the mouse pointer leaves the HTML elements area on the page. It is thus kind of opposite
in function to the mouseenter()
mouseover() + mouseout()
The mouseover() and mouseout() functions works like the mouseenter() and
mouseleave(), except that the mouseover() and mouseout() fires
too, if the mouse is over or out of nested elements of the HTML element that has the event listener.
In other words, if you have a div with 4 inner div's in, when the mouse
is over or out of each of the nested div's, the event handler of the parent div will fire.
Most often, this is not the effect you are looking for. More often, you really want the effect of
mouseenter() and mouseleave() instead of mouseover() and
mouseout(). mouseenter() and mouseleave() will only fire
when the mouse enters or leaves the parent HTML element. Not for each of the child elements too.
Ben Nadel has done a great job of describing the difference between the mouseover() / mouseout()
and mouseenter() / mouseleave() methods, including a nice video showing the difference in action.
Here is his blog post:
MouseOver / MouseOut vs. MouseEnter / MouseLeave
mousedown()
The mousedown() function attaches an event handler function to an HTML element that is executed,
when the left mouse button is pressed down, while the mouse is over the HTML element. Here is an example:
<script type="text/javascript">
$(document).ready(function() {
$('#theDiv').mousedown(function() {
alert("Mouse down");
});
});
</script>
<div id="theDiv">Mouse down on this div!</div>
mouseup()
The mouseup() function works like the mousedown(), except that it is executed
when the user release the left mouse button. So, if the user presses the left mouse button down, and holds
it down, the event handler is not executed. Not until the mouse button is released.
If the mouse cursor leaves the HTML element while the left mouse button is pressed and held, the event does not fire either. The mouse button must be released while the mouse cursor is above the HTML element which has the event handler function attached. Thus, the event handler function is also executed if the mouse button is pressed down outside of the element, the mouse cursor enters the HTML element while mouse button is pressed, and the mouse button is then released.
mousemove()
The mousemove() function attaches an event handler function to an HTML element, which
is executed if the mouse moves inside the HTML element. Here is an example:
<script type="text/javascript">
$(document).ready(function() {
$('#theDiv').mousemove(function() {
alert("Mouse move");
});
});
</script>
<div id="theDiv">Mouse move over this div!</div>
hover()
The hover() function is a combination of the mouseenter() and mouseleave()
method. Instead of taking just one function as parameter, hover() takes two. One function that is
excuted when the mouse enters the HTML element, and one that is executed when the mouse leaves the HTML element.
Here is an example:
<script type="text/javascript">
$(document).ready(function() {
$('#theDiv').hover(
function() {
alert("Div entered");
},
function() {
alert("Div left");
}
);
});
</script>
<div id="theDiv">The div...</div>
toggle()
The toggle() function enables you to execute one of several functions, whenever
a HTML element is clicked. Here is an example:
<script type="text/javascript">
$(document).ready(function() {
$('#theDiv').toggle(
function() {
alert("Div clicked once");
},
function() {
alert("Div clicked twice");
}
);
});
</script>
<div id="theDiv">The div...</div>
This example will switch between executing one of two functions whenever the div is clicked.
You can pass as many functions to toggle() as you like (not just 2, as in the example above).
focus()
The focus() function attaches an event handler function to a form field, which is executed
when the form field gets focus. Here is a simple example:
<script type="text/javascript">
$(document).ready(function() {
$('#field1').focus(
function() {
alert("Focus!");
}
);
});
</script>
<input id="field1" type="text">
blur()
The blur() function attaches an event handler function to a form field, which is executed
when the form field loses focus. In other words, the opposite of the focus() function.
keydown()
The keydown() function attaches an event handler to a form field, which is executed
when a key is pressed down, when the form field has focus. Here is an example:
<script type="text/javascript">
$(document).ready(function() {
$('#field1').keydown(
function() {
alert("Key down!");
}
);
});
</script>
<input id="field1" type="text">
keyup()
The keyup() function attaches an event handler to a form field, which is executed
when a key is released, when the form field has focus. In other words, it works opposite of
keydown().
keypress()
The keypress() function attaches an event handler to a form field, which is executed
when a key is pressed (pressed down and released), when the form field has focus.
| Tweet | |
Jakob Jenkov | |
