Skip to content
Related Articles

Related Articles

Save Article
Improve Article
Save Article
Like Article

jQuery | Event Methods Complete Reference

  • Difficulty Level : Medium
  • 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:




<!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>

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 :