Web page can do a specific action that is called event, the actions your web application can detect.  An event is any time the user interacts with the browser. Usually this is done with the mouse or keyboard. 

The most commonly used event methods:

  • click()- Click: executes on a single mouse click.
  • hover() - Hover: executes when the mouse is hovered over an element. mouseenter() and mouseleave() apply only to the mouse entering or leaving an element, respectively.
  • submit() - Submit: executes when a form is submitted.
  • scroll() - Scroll: executes when the screen is scrolled.
  • keydown() - Keydown: executes when you press down on a key on the keyboard.

example.html

<!doctype html>
<html lang="en">
    <head>
        <title>jQuery Tutorial</title>
        <style>
            .overlay {
                display: none;
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                height: 200px;
                width: 200px;
                background: gray;
            }
        </style>
    </head>

    <body>

        <button class="my-btn">click me</button>
        <div class="overlay"></div>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script>

            $(document).ready(function() {
                $(".my-btn").click(function() {
                    $(".overlay").toggle();
                });
            });
        </script>
    </body>

</html>

Here I am using onclicklistener event when press the button toggle method will toggle the CSS display property between none and block