Skip to content
Related Articles

Related Articles

jQuery | Event Methods Complete Reference
  • Last Updated : 16 Dec, 2020

Event refers to the actions performed by the site visitor during their interactivity with the website (or webpage).There can be various types of events such as

  1. User clicks on the button.
  2. User moves mouse pointer over an image.
  3. User pressed any key from keyboard, etc.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <script src=
</script>
    <style type="text/css">
        #e5 {
            width: 100px;
            height: 100px;
            border-radius: 0px;
            background-color: aqua;
        }
    </style>
</head>
  
<body>
    <p id="e1">Welcome.</p>
    <p id="e2">Learn and Explore</p>
    <p>
        <input type="text" id="e3" value="jQuery is powerful!" />
    </p>
    <p id="e4" align="left">Geeks for Geeks</p>
    <p>
        <div id="e5"></div>
    </p>
    <button id="gfg1">Change Text</button>
    <button id="gfg2">Change HTML</button>
    <button id="gfg3">Change Value</button>
    <button id="gfg4">Change Alignment</button>
    <button id="gfg5">Change Shape</button>
    <script type="text/javascript">
        $("#gfg1").click(function() {
            $("#e1").text("Geeks for Geeks");
        });
        $("#gfg2").click(function() {
            $("#e2").html("<b>Enrich your Knowledge.</b>");
        });
        $("#gfg3").click(function() {
            $("#e3").val("jQuery at Geeks for Geeks");
        });
        $("#gfg4").click(function() {
            $("#e4").attr("align", "center");
        });
        $("#gfg5").click(function() {
            $("#e5").css("border-radius", "50px");
        });
    </script>
</body>
  
</html>

chevron_right


Output:
Before clicking on buttons:

After clicking on buttons:

The complete list of jQuery Events are given below:




My Personal Notes arrow_drop_up
Recommended Articles
Page :