Objectives and outcomes

In this tutorial we are going to learn about jquery events. Jquery Events are the actions taken by user to which a web page can respond to. The events action is performed as soon as the events is fired. There are four types of events in jquery namely : Mouse events, Keyboard events, Form events and Document or Window events. All these events include various other events for eg-

1- Mouse events - click, dblclick, hover, mouseup, mousedown, mouseenter and mouseleave.
2- Keyboard events - keypress, keydown and keyup.
3- Form events - submit, change, focus and blur.
4- Document or Window events - load, resize, scroll and unload.



$(document).ready() method syntax

<script>
$(document).ready(function()
{
//action part goes here
.
.
});
</script>

This events is fired as soon as the page is fully loaded.



Blur method syntax (Form event)

<script>
$("input").blur(function()
{
//action part goes here
.
.
});
</script>


mouseup() event

<script>
$("selector").mouseup(function()
{
//action part goes here
.
.
.
});
</script>

This event is fired when the mouse left, middle or right button is released when the mouse is on selected element.



Another way of firing an event

<script>
$("selector").on("click",function()
{
//action part goes here
.
.
.
});
</script>


Attaching multiple event handlers

<script>
$("selector").on({
mouseenter: function()
{
//here comes the action part
.
.
},
mouseleave: function()
{
//here comes the action part
.
.
},
click: function()
{
// here comes the action part
.
.
}
});
</script>