jQuery Events

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        body { font-family: sans-serif; padding: 20px; background: #f8fafc; }
        .trigger-pad { background: #0d2e5c; color: white; padding: 30px; text-align: center; border-radius: 8px; cursor: pointer; user-select: none; }
        #logArea { margin-top: 15px; height: 130px; overflow-y: auto; background: #0f172a; color: #4ade80; padding: 12px; border-radius: 6px; font-family: monospace; font-size: 13px; }
    </style>
</head>
<body>
    <h3>Perekam Event Antarmuka</h3>
    <div class="trigger-pad" id="padAksi">
        Arahkan Mouse ke Sini, Klik, atau Klik Ganda (Double Click)!
    </div>

    <div id="logArea">Menunggu aktivitas event pengguna...<br></div>

    <script>
        $(document).ready(function() {
            function catat(nama) {
                $('#logArea').prepend('[' + new Date().toLocaleTimeString() + '] Event terdeteksi: ' + nama + '<br>');
            }
            $('#padAksi').on({
                mouseenter: function() { catat('mouseenter'); $(this).css('background', '#00758f'); },
                mouseleave: function() { catat('mouseleave'); $(this).css('background', '#0d2e5c'); },
                click: function() { catat('click'); },
                dblclick: function() { catat('dblclick (Klik Ganda)'); }
            });
        });
    </script>
</body>
</html>