20230712_JQ/01_jq_event_on.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #box {
            width: 300px;
            height: 300px;
        }

        .red {
            background-color: red;
        }

        .blue {
            background-color: lightblue;
        }
    </style>

</head>

<body>

    <div id="box" class="red"></div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"
        integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>


    <script>
        // JQUERY 放在ready內
        $(document).ready(function () {
            const box = $('#box');

            // 方法一
            // 簡單
            box.click(function () {
                console.log('click ok');
            });
            box.mouseenter(function () {
                console.log('mouseenter ok');
            });
            box.mouseleave(function () {
                console.log('mouseleave ok');
            });

            // 方法二，不常用，建議還是用方法一就好
            // on
            // on method(object)
            // object method 
            box.on({
                mouseenter: function () {
                    $(this).css("background-color", "lightgray");
                },
                mouseleave: function () {
                    $(this).css("background-color", "lightblue");
                },
                click: function () {
                    $(this).css("background-color", "yellow");
                }
            }
            
            , function () {

            });

        });
    </script>
</body>

</html>