Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Events Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        /* CSS for styling buttons and message */
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        
        button {
            padding: 10px 20px;
            font-size: 16px;
            margin: 10px;
            cursor: pointer;
        }

        #message {
            font-size: 20px;
            color: blue;
            margin-top: 20px;
        }

        input[type="text"] {
            padding: 10px;
            margin: 10px 0;
            font-size: 16px;
            width: 300px;
        }
    </style>
</head>
<body>

    <h1>jQuery Events Demo</h1>

    <button id="clickButton">Click Me</button>
    <button id="dblClickButton">Double Click Me</button>
    <button id="hoverButton">Hover Over Me</button>
    <input type="text" id="focusInput" placeholder="Click or focus here">
    
    <div id="message"></div>

    <script>
        // jQuery event demonstrations
        $(document).ready(function() {

            // Click event
            $('#clickButton').click(function() {
                $('#message').text('Button Clicked!').css('color', 'green');
            });

            // Double click event
            $('#dblClickButton').dblclick(function() {
                $('#message').text('Button Double Clicked!').css('color', 'purple');
            });

            // Hover event (mouseenter and mouseleave)
            $('#hoverButton').hover(
                function() {  // mouseenter
                    $('#message').text('Mouse Hovering!').css('color', 'orange');
                },
                function() {  // mouseleave
                    $('#message').text('Mouse Left!').css('color', 'blue');
                }
            );

            // Focus event on input field
            $('#focusInput').focus(function() {
                $(this).css('background-color', '#e0f7fa');  // Change background color on focus
                $('#message').text('Input Focused!').css('color', 'brown');
            });

            // Blur event (when the input field loses focus)
            $('#focusInput').blur(function() {
                $(this).css('background-color', 'white');  // Reset background color
                $('#message').text('Input Lost Focus!').css('color', 'red');
            });
        });
    </script>

</body>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter