Welcome friends. Today we are here to discuss the heart of jquery. Do you know who is the heart of jquery?. i think your answer is ready. Am i right?. Events are the heart of the jquery. If we say, events means jquery and jquery means events then it will not be wrong. Events can do everything and fulfill your requirements. There are so many events in jquery but we are discussing only few events. Let's start with the event named click.

A) click event: It is most simple event and most used event as well. This event was added in jquery v(1.0) and it has been modified many times till now. We will here only discuss its uses in web development. You can simply attach this event on any element on page. Please have a look.

<script>
jQuery(function($){
    jQuery("button").click(function(){
     alert('click event occurred');
    });
});
</script>   
<div class="main">
<button>Click event</button>
</div>

In above example we attached the click event on button. When user will click on the button, he will see the alert box. You can do anything in this handle function.

B) dblclick event: It is another simple event which was added in jquery v(1.0). Please see below example.

<script>
jQuery(function($){
    jQuery("button").dblclick(function(){
     alert('double click event occurred');
    });
});
</script>   
<div class="main">
<button>Click event</button>
</div>

In above example it will show the alert box whenever user double click on the button. You can implement anything with this event.

C) mouseleave and mouseout events: It is useful to execute the callback function whenever user leave the mouse from the attached element. It is different from mouseout event. when user moves out the cursor from child element and mouse leave will be fired when cursor moves out from bound element.

<script>
jQuery(function(){
    var mouseleavecount = 0;
    var mouseoutcount = 1;
    jQuery('.main').mouseleave(function(){
    jQuery('.mouseleavemsg').html('mouse leave occurred' + ++mouseleavecount);

    });

    jQuery('p:first').mouseout(function(){
    jQuery('.mouseoutmsg').html('mouse out occurred' + ++mouseoutcount);
    });
    jQuery('p:last').mouseout(function(){
    jQuery('.mouseoutmsg').html('mouse out occurred' + ++mouseoutcount);
    });

});
</script>
<style>
.main
{
    width:490px;
    height:300px;
    background: #fcc;
}
p
{
    color:#fff;
}
</style>
<div class="main">
<p>just checking mouse out event on paragraph 1</p>
<p class="mouseoutmsg"></p>
<p class="mouseleavemsg"></p>
<p>just checking mouse out event on paragraph 2</p>
</div>

In above example we attached the mouseleave event on outer element and mouseout on inner elements.

D) mouseenter and mouseover events: mouseenter will be fired when cursor enters in the bound element. it is different from the mouseover event. mouseover event will be fired when user will move the cursor on bound element. Please have a look.

<script>
jQuery(function(){
    var mouseovercount = 0;
    var mouseentercount = 1;
    jQuery('.main').mouseenter(function(){
    jQuery('.mouseentermsg').html('mouse enter occurred' + ++mouseentercount);

    });

    jQuery('.main').mouseout(function(){
    jQuery('.mouseovermsg').html('mouse over occurred' + ++mouseovercount);
    });


});
</script>
<style>
.main
{
    width:490px;
    height:300px;
    background: #fcc;
}
p
{
    color:#fff;
}
</style>
<div class="main">
<p class="mouseovermsg"></p>
<p class="mouseentermsg"></p>
</div>

In above example we attached the mouseenter and mouseover events. When cursor enter inside the div then mouseenter will be trigger and when cursor moves inside the div then mouseover will be fired.

E) mouseup and mousedown events: When you drag any element and release the mouse button then mouseup will be fired and when you press the button to drag the element then mousedown will be fired. Let's take an example.

<script>
jQuery(function(){
    var mouseupcount = 0;
    var mousedowncount = 1;
    jQuery('.main').mouseup(function(){
    jQuery('.mouseupmsg').html('mouse up occurred' + ++mouseupcount);

    });

    jQuery('.main').mouseout(function(){
    jQuery('.mousedownmsg').html('mouse down occurred' + ++mousedowncount);
    });


});
</script>
<style>
.main
{
    width:490px;
    height:300px;
    background: #fcc;
}
p
{
    color:#fff;
}
</style>
<div class="main">
<p class="mouseupmsg"></p>
<p class="mousedownmsg"></p>
</div>

In above example we attached the both the events and mouseup will be fired when mouse key releases and mousedown will be fired when mouse key goes down.

F) blur and focus events: blur event will be fired when user loses the focus from bound element and in reverse of it focus will be fired when user gives focus to the bound element. Let's take an example.

<script>
jQuery(function(){
    var focuscount = 0;
    var blurcount = 1;
    jQuery('#emailaddress').blur(function(){
    jQuery('.mouseblurmsg').html('blur occurred' + ++mouseblurcount);

    });

    jQuery('#emailaddress').focus(function(){
    jQuery('.mousefocusmsg').html('focus occurred' + ++mousefocuscount);
    });


});
</script>
<style>
.main
{
    width:490px;
    height:300px;
    background: #fcc;
}
p
{
    color:#fff;
}
</style>
<div class="main">
<input type="text" name="emailaddress" id="emailaddress" />
<p class="mouseblurmsg"></p>
<p class="mousefocusmsg"></p>
</div>

In above example we attached the focus and blur events on same text field and counting the time when these events happen. These events use in the user input forms and very helpful in form validation.

G) hover event: This event binds the one or two events such as mouseover , mouseleave and to be executed when mouse cursor enters and leaves the bound element. please have a look.

<script>
jQuery(function(){
    jQuery('.hoverbase').hover(function(){

       jQuery(this).css('background-color','#ffffcc');
    });
    jQuery('.hoverbase').mouseout(function(){

       jQuery(this).css('background-color','#fff');
    });



});
</script>
<style>
.main
{
    width:490px;
    height:300px;
    background: #fcc;
}
p
{
    color:#fff;
}
</style>
<div class="main">
<ul>
<li class="hoverbase">
<a href="">jquery hover event</a>
</li>
<a href="">text the event</a>
<li>

</li>
</ul>
</div>