Hello, today I'd like to show how to get started with jQuery Event Methods. Im going to introduce several commonly used jQuery event methods such as: click(), dblclick(), mouseenter(), mouseleave(), mousedown(), mouseup(), hover().
1. click()
The function click() is executed when the user clicks on the HTML element.
Example:
$("p.click").click(function(){$(this).hide();
});
2. dblclick()
This function is executed when the user double-clicks on the HTML element.
Example:
$("p.dbClick").dblclick(function(){
$(this).hide();
});
3. mouseenter()
mouseenter() is executed when the mouse pointer enters the HTML element.
Example:
$("#p1").mouseenter(function(){
$(this).addClass("yellowColor");
});
4. mouseleave()
The function is executed when the mouse pointer leaves the HTML element.
Example:
$("#p1").mouseleave(function(){
$(this).removeClass("yellowColor");
});
5. mousedown()
The function is executed, when the left, middle or right mouse button is pressed down, while the mouse is over the HTML element.
Example:
$("#p3").mousedown(function(){
alert("Mouse down Hoan handsome");
});
6. mouseup()
The function mouseup() is executed, when the left, middle or right mouse button is released, while the mouse is over the HTML element.
Example:
$("#p2").mouseup(function(){
alert("You has Mouse up over p2!");
});
7. hover()
The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.
Example:
$("#p4").hover(function(){
alert("You entered p4!");
},
function(){
alert("Bye! You now leave p4!");
});
To sum up, the above methods are very basic one that you would be quickly involved. There are wide range of jQuery events out there, I hope that you can use each jQuery methods on your way efficiently. We can refer the full example code here. https://jsfiddle.net/quanghoan/q20mcu8q/3/
Thank for reading!
Thank for reading!
:v
ReplyDeleteVery much useful article. Kindly keep blogging
ReplyDeleteES6 Corporate Training in Chennai
ES6 Training in Chennai