Repository
https://github.com/jquery/jquery
What Will I Learn?
I will learn in this tutorial the jquery events in particular the mouse events.
- The click and double click events.
- The mouseenter and mouseleave events.
- The mouseover event.
- The hover event.
Requirements
- Knowledge about HTML5 and CSS3
- Knowledge about jQuery
- A text editor like notpad ++
Difficulty
- Basic
Description
In this tutorial we will learn the jQuery events , the jQuery has 4 types of events we will take the first type ( Mouse Events ) .
- I created a table to organize the explanation and to clarify the points more, in the table I have 4 columns , each one contains an event
1- Click Event :
We can customize what will happen when we click on an element button for example or link or something else by the ' click event ' .
Before anything you must select the element by the $('element') selector , after that we apply the .click() event .
We pass a function as parameter for this method $('element').click(function () { // something here }));
And when you click on the element , the system will execute the //something here , it will execute the content of the function.
In the function you can do anything you need for the example that I explained I have show a list when I click on the button , and this is a benefit of clicking benefits.
My code :
/******* click event **********/
$('.btnClick').click(function () {
$('.listTest1').animate({
height: '80px'
}, 600);
$('.listTest1').css('visibility', 'visible');
});
2- Double Click Event :
The system will execute the content of the function just when we double the click on the element and for that we need the dblclick() event .
$('element').dblclick(function () { //something here});
For the example that I mentioned when I double the click on the button, the list will appear , there is many examples to use the double click, let's just know that it's very important and very usable.
My code :
/******* double click event **********/
$('.btnDblClick').dblclick(function () {
$('.listTest2').animate({
height: '80px'
}, 600);
$('.listTest2').css('visibility', 'visible');
});
The result when we click on the first button and when we double the click on the second button :
3- MouseEnter Event :
This event is very important, we need it a lot in the sliders , images and portfolios ..etc , when we pass the mouse on the image the informations about the image will appear and it's a good effect .
You should firstly select the element $('element') then you need to use the event mouseenter() with the function as parameter $('element').mouseeneter(function () { //something here });
My code :
/**** MouseEnter event ****/
$('.tdImg1').mouseenter(function () {
$('.overley1').fadeIn(600);
});
The result :
4- MouseLeave Event :
This event is the contrary of the previous event , when we pass the mouse on the element the system will execute the mouseenter event and when we leave from the element the system will execute the mouseleave event.
$('element').mouseleave(function () { //something here});
We select the element firstly then we apply the event to disappear an element for example .
My code
/**** MouseLeave event ****/
$('.tdImg1').mouseleave(function () {
$('.overley1').fadeOut(600);
});
5- MouseOver Event :
This event is the same with the mouseenter event , when you enter the mouse on the element something will be applied.
$('element').mouseover(function () { //something here});
This is my code :
/******* MouseOver event **********/
$('.tdImg2').mouseover(function () {
$('.overley2').fadeIn(600);
});
6- Hover Event :
The hover event combine between the mouseenter and mouseleave events , it has two functions
$('element').hover(function () { //first function}, function () { //second function });
The first function equals to the mouseenter event and the second function equals to the mouseleave event.
My code :
/**** Hover ****/
$('.tdImg1').hover(function () {
$('.overley1').fadeIn(600);
}, function () {
$('.overley1').fadeOut(600);
});
Video Tutorial
Curriculum
Proof of Work Done
https://github.com/alexendre-maxim/jQuery-Events