jQuery Event Methods

jQuery was created specifically to react to events in HTML pages.

You can also search for these topics, jquery event object, how to handle the event methods in jquery, list out the jquery event methods, how to click the jquery event function, working of multiple functions in jquery event, jquery methods on element.

What are Events?

Events refer to all of the many visitor activities to which a web page can respond.

An event is the exact time when something is taking place.

Examples :-

dragging the mouse over a component
Choose a button for radio
Clicking on an element

When it comes to occurrences, the phrase "fires/fired" is frequently employed. "Whenever you press a key, the keypress event is triggered".

Some of the most common DOM occurrences are listed here :

Mouse Events	Keyboard Events	Form Events	Document/Window Events
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

You can also search for these topics, list out categories in jquery events, mention the events in jquery attributes, what are dom events in jquery, Example for events using jquery, fire the jquery events.

jQuery Syntax For Event Methods

Most DOM events have a jQuery method that corresponds to them in jQuery.

You may use the following code to add a click event to all paragraphs on a page :

$("p").click();

The following step is to specify what should happen if the event occurs. You'll need to provide the event a function :

$("p").click(function(){
  // action goes here!!
});

You can also search for these topics, dom events vs jquery, syntax for jquery event methods, event function methods using jquery, how to pass a function to event.

Commonly Used jQuery Event Methods

$(document).ready()

When the document is entirely loaded, the $(document).ready() method allows us to run a function. This event is previously covered in the chapter on jQuery Syntax.

The click() and dblclick() methods

An event handler (mouse single click) function is attached to an HTML element through the click() event method.

When the user clicks on an HTML element, the click() function is executed.

An event handler (mouse double click) function is attached to an HTML element using the dblclick() event method.

When the user double clicks on an HTML element, the dblclick() function is executed.

Example :- Hide the current p element with class="single" when a click event is fired and Hide the current p element with class="double" when a dblclick event is fired

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("p.single").click(function () {
            $(this).hide();
        });
        $("p.double").dblclick(function () {
            $(this).hide();
        });
    });
</script>
</head>
<body>

<p class="single">If you <b>click</b> on me, I will disappear.</p>
<p class="double">If you <b>double</b> click on me, I will disappear.</p>
<p>You cannot hide me!</p>

</body>
</html>

Output :-

If you click on me, I will disappear.

If you double click on me, I will disappear.

You cannot hide me!

You can also search for these topics, jquery click() function example, jquery trigger the click() event, how to link the jquery click() method, toggle the jquery click(), working of click() using jquery, dblclick prevent single click using jquery, how to prevent double click method in jquery, simulate or detect the double click event, execute the datatable double click in jquery, how to dblclick the jquery function example, remove the dblclick event using jquery.

The mouseenter() and mouseleave() methods

An event handler (mouse enter) function is attached to an HTML element using the mouseenter() event method.

When the mouse pointer enters the HTML element, the mouseenter() function is called.

An event handler (mouse leave) function is attached to an HTML element using the mouseleave() event method.

When the mouse pointer exits the HTML element, the mouseleave() function is called.

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#p1").mouseenter(function () {
            $("#p3").hide();
        });
        $("#p2").mouseleave(function () {
            $("#p3").show();
        });
    });
</script>
</head>
<body>

<p id="p1">I will <b>hide</b> the 3rd paragraph while <b>mouse enter</b> on me!</p>

<p id="p2">I will <b>show</b> the 3rd paragraph while <b>mouse leave</b> from me!</p>

<p id="p3">I am 3rd paragraph!</p>

</body>
</html>

Output :-

I will hide the 3rd paragraph while mouse enter on me!

I will show the 3rd paragraph while mouse leave from me!

I am 3rd paragraph!

You can also search for these topics, jquery mouseenter() fires multiple times, delay the jquery mouseenter(), jquery mouse enter toggle, mouse enter example, jquery mouseleave() method example, toggling the jquery mouseleave(), delay the jquery mouseleave() event, mouse leave timeout.

The mousedown() and mouseup() methods

The mousedown() method defines a mouse down event handler to an HTML element.

When the mouse button (left, centre, or right) is pushed the mousedown() function is executed.

The mouseup() method defines a mouse up event handler to an HTML element.

When the mouse button (left, centre, or right) is relesed the mouseup() function is executed.

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#p1").mouseenter(function () {
            alert("You entered p1!");
        });
    });
</script>
</head>
<body>

<p class="down">I will <b>hide</b> the 3rd paragraph when <b>mouse down</b> on me!</p>

<p class="up">I will <b>show</b> the 3rd paragraph when <b>mouse up</b> on me!</p>

<p id="p6">I am 3rd paragraph!</p>

</body>
</html>

Output :-

I will hide the 3rd paragraph when mouse down on me!

I will show the 3rd paragraph when mouse up on me!

I am 3rd paragraph!

Tip: In the first paragraph press the mouse button (don't relese the button) and in the second paragraph press the mouse button (wait few seconds) then relese it.

You can also search for these topics, jquery mousedown events, mousedown left click only using jquery, jquery mousedown stop click event, explain mouse down method, how to perform jquery mousedown example, mouseup event in jquery example, how to bind and call jquery mouse up event.

hover()

The mouseenter() and mouseleave() methods are combined in the hover() method, which takes two functions.

The first function is executed when the mouse enters to an HTML element and the second function is executed when the mouse exits from the HTML element.

Exmple :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#hover").hover(function () {
            $("#hover").css("color", "red");
        },
      function () {
          $("#hover").css("color", "blue");
      });
    });
</script>
</head>
<body>

<p id="hover">This is a paragraph.</p>

</body>
</html>

Output :-

This is a paragraph.

You can also search for these topics, jquery hover() function and method example, how to add class in jquery hover, multiple elements works in jquery hover, leave the jquery hover, examine link works in jquery hover function.

The focus() and blur() methods

An event handler (focus) function is attached to an HTML form field using the focus() event method.

When a form field receives cursor attention or activated, the focus() function is performed :

An event handler (blur) function is attached to an HTML form field using the blur() technique.

When a form field loses cursor attention or focus, the blur() function is executed.

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("input").focus(function () {
            $(this).css("background-color", "yellow");
        });
        $("input").blur(function () {
            $(this).css("background-color", "green");
        });
    });
</script>
</head>
<body>

<p>Name: </p><input type="text" name="fullname" style="width:auto" /><br />
<p>Email: </p><input type="text" name="email" style="width:auto" />

</body>
</html>

Output :-

Name:

Email:

you can also search for these topics, set the focus method in jquery, jquery focusin and out event, multiple elements focus, jquery focus mouse on input, multiple input, jquery focus next input element on enter, jquery focus() function, blur focus and change in jquery example, blur the background and effect using jquery, select option in jquery blur method, page and screen, how to blur multiple events and elements with jquery, multiple fields, blur and submit, new focus element, keyup and hover blur method with jquery.

The on() Method

The on() function is used add one or more event handlers to an selected HTML element.

A HTML element can have numerous event handlers attached to it using on() method.

Example :-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#p5").on({
            mouseenter: function () {
                $(this).css("font-size", "larger");
            },
            mouseleave: function () {
                $(this).css("font-size", "small");
            },
            click: function () {
                $(this).css("color", "green");
            }
        });
    });
</script>
</head>
<body>

<p id="p5">Click or move the mouse pointer over this paragraph.</p>

</body>
</html>

Output :-

Click or move the mouse pointer over this paragraph.

You can also search for these topics, jquery on() click method example, jquery on() change method, multiple events works jquery on(), on() method to hover using jquery.