jQuery Event Methods

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!

If you liked this article

Let's subscribe the updates of Scuti!

Share on Google Plus

About Quang Hoan

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.