Learn Events in jQuery

In our last post we learnt about top jQuery Functions which I believe was a good start to your jQuery development. Today we will proceed to learn about Events in jQuery. Events are the main part of JavaScript. And as JQuery is a library of JavaScript, its events are also the part of jQuery as well. Events are the actions which triggers the functions according to the client’s action. The specialty of events is that, they can perform any action when someone calls them. Calling an event called firing an event or triggering an event. Event and function always looks same. We can differentiate them by their names and places.

Some of the examples of Events are as follows:

• Click or double click to an HTML element
• Mouse pointer over an HTML element
• Keyboard events by pressing keys
• Loading webpages
• Selection a radio button or check box

Consider an Example, to create a program where users has a button. If user press that button then a note appears saying “don’t click here again!” For this you must use the click event. When user clicks that button then click event fires the function of appearing the selected HTML element.

<script>
// jQuery script is just started with the ready event which is most important to run a jQuery script
	$(document).ready(function(){
//.click (); event which can be fired if someone clicks on its event specified HTML element
		$(‘#click_event’).click(function(){
// This is the scripting area for this .click(); event
			$(‘#elem’).slideDown();
});
// double click event
$(‘#dbl_click_event’).dbl_click(function(){
//scripting area
	$(‘#elem’).slideUp();
});
//mouseenter event
$(‘#mouseenter_event’).mouseenter(function(){
//scripting area
	$(‘#elem’).fadeIn();
});
// mouseleave event
$(‘#mouseleave_event’).mouseleave(function(){
// Scripting area
	$(‘#elem’).fadeOut();
});
});
</script>
<!—Event specified HTML elements-->
<div id=”#click_event”></div>
<div id=”#dbl_click_event”></div>
<div id=”#mouseenter_event”></div>
<div id=”#mouseleave_event”></div>
<!—The selected HTML element where we get all the result of different functions according to the event’s actions -->
<div id=”#elem”></div>

In the above script, I used some most famous and important events:
.ready();
.click();
.dbl_click();
.mouseenter();
.mouseleave();

Javascript function(){}

The function: function(){} executes at the time of firing each event. This function(){} is actually a part of JavaScript. We can write our event bounded script inside this function. We have to use this function(){} with every event to declare what we want at the time of firing or triggering.

.click(function(){});

1) .ready(); event:

This event triggers when our webpage loads itself completely included image and videos. This event makes sure that everything is ready and OK, so now just start printing jQuery results. We can’t work in jQuery without this event. We can’t use this event with any tag, id or class. Because it works with the whole document.

$(document).ready(function(){});

2) .click(); event:
This event fires when user clicks on the click event specified HTML element below

<div id=”#click_event”></div>.

Then this event triggers:

$(‘#click_event’).click(function(){});

3) .dbl_click(); event:
This event works in the same way as .click(); event works. But it need double clicks to be fired. Otherwise its same.

$(‘#dbl_click_event’).dbl_click(function({});

4) .mouseenter(); event:

This event doesn’t need to be clicked its html element. It just needs a hover of mouse pointer at its specified HTML element to be fired or triggered. When you take your mouse over its specified HTML element then the script inside its function will be executed.

$(‘#mouseenter_event’).mouseenter(function({});

5) .mouseleave(); event:

This event works in the opposite way of .mouseenter(); event. When you take back your mouse pointer from this event’s specified HTML element then the script inside this event’s function will be executed.

$(‘#mouseleave_event’).mouseleave(function({});

I hope, by going through this tutorial you must have got an idea of using Events in jQuery. In case of any views or suggestions regarding this post you can let me know in comment section below. Till then happy learning.