Login

Username:

Password: 

Join us Now |  Forgot Password? | Forgot UserName?

jQuery

Learn step by step



jQuery Event

JQuery makes it easy to respond to the events in HTML page. For example, executing some JavaScript code when the mouse enters (is above) a certain HTML element, when the mouse button is clicked, when the mouse leaves etc.

Below given is a list of the most commonly used events, which JQuery can help you handle. 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()
$(document).ready()

Function $(document).ready() enables you to execute a function when the document is fully loaded.

click()

Function click() attaches an event handler function to an HTML element, which is executed when the user clicks the HTML element.


<script type="text/javascript">
$(document).ready(function() {
$('#theDiv').click(function() {
alert("Div clicked");
});
});
</script>

<div id="theDiv">Click this div!</div>

Example selects the div element with the id "theDiv", and attaches a click handler function to it. Whenever the div is clicked, the click handler function is executed.

dblclick()

Function dblclick() works just like the function click(), except it reacts to double clicks instead of single clicks.

mouseenter()

Function mouseenter() attaches an event handler function to an HTML element, which is executed when the mouse pointer enters the HTML elements area. Example:


<script type="text/javascript">
$(document).ready(function() {

$('#theDiv').mouseenter(function() {
alert("Div entered");
});
});
</script>
<div id="theDiv">Enter this div!</div>
mouseleave()

Functions mouseleave() attaches an event handler function to an HTML element, Executed when mouse pointer leaves the HTML elements area. It is opposite in function to the mouseenter()

mouseover() + mouseout()

Functions mouseover() and mouseout() works like the mouseenter() and mouseleave(), except that the functions mouseover() and mouseout() fires too, if mouse is over or out of nested elements of the HTML element that has the event listener. Or we can say, if we 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 we are looking for. More often, we really want the effect of mouseenter() and mouseleave() instead of mouseover() and mouseout(). mouseleave() and mouseenter() will only fire when the mouse enters or leaves the parent HTML element. Not for each child element too.

Ben Nadel has done a great job of describing the difference between the mouseover() / mouseout() and mouseenter() / mouseleave() functions, including a nice video showing the difference in action. Here is blog post:

mousedown()

Function mousedown() attaches an event handler function to an HTML element that is executed, when mouse left-click button is pressed, while the mouse is over the HTML element which had function attached. Example given:


<script type="text/javascript">
$(document).ready(function() {

$('#theDiv').mousedown(function() {
alert("Mouse down");
});
});
</script>
<div id="theDiv">Mouse down on this div!</div>
mouseup()

Function mouseup() works like the mousedown(), except it is executed when the user release the left-click mouse button. Therefore, if the user presses the left mouse button down, and holds it down, then the event handler is not executed. Until the mouse button is released.

If the mouse cursor leaves the HTML element while the left mouse button is pressed and held, event does'nt fire either. The left mouse button must be released while the mouse cursor is above the HTML element which has the event handler function attached. Therefore, event handler function is also executed if the mouse button is pressed down outside of the element, and the mouse cursor enters the HTML element while mouse button is pressed, and then the mouse button is released

mousemove()

Function mousemove() attaches an event handler function to an HTML element, which is executed if the mouse moves inside the HTML element. Given 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()

Function hover() is a combination of the mouseenter() and mouseleave() functions. Instead of taking just one function as parameter, hover() takes two. One of which is executed when the mouse enters the HTML element, and another one that is executed when the mouse leaves the HTML element. Given 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()

Function toggle() enable us to execute one of several functions, whenever any HTML element is clicked.


<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>

Example: It will switch between executing one of the two functions whenever the div element is clicked.

We can pass as many functions to toggle() as we like (not just 2, as in the example).

focus()

Function focus() attaches an event handler function to a form field, That is executed when the form field gets focus. Given example:


<script type="text/javascript">
$(document).ready(function() {

$('#field1').focus(
function() {
alert("Focus!");
}
);
});
</script>
<input id="field1" type="text">
blur()

Function blur() attaches an event handler function to a form field, That is executed when the form field loses focus. In other words, the opposite of the function focus().

keydown()

Function keydown() attaches an event handler to a form field, that is executed when key is pressed down, when the form field has focus. Given example:


<script type="text/javascript">
$(document).ready(function() {
$('#field1').keydown(
function() {
alert("Key down!");
}
);
});
</script>
<input id="field1" type="text">
keyup()

Function keyup() attaches an event handler to a form field, that is executed when a key is released, when the form field (HTML element) has focus. In other words we can say it works opposite of function keydown().

keypress()

The function keypress() attaches an event handler to a form field, that is executed when a key is pressed (pressed down and released), when the form field has focus.



Related Videos