jquery鼠标焦点事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Focus Event Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 直接绑定focus事件
            $('#inputField').focus(function() {
                console.log('Input field is focused');
                $(this).css('border', '2px solid blue');
            });

            // 直接绑定blur事件
            $('#inputField').blur(function() {
                console.log('Input field lost focus');
                $(this).css('border', '1px solid #ccc');
            });

            // 事件委托
            $('body').on('focusin', '.dynamicElement', function() {
                console.log('Dynamic element is focused');
            });

            $('body').on('focusout', '.dynamicElement', function() {
                console.log('Dynamic element lost focus');
            });
        });
    </script>
</head>
<body>
    <input type="text" id="inputField" placeholder="Type something...">
    <div class="dynamicElement" tabindex="0">Click me</div>
</body>
</html>

$(document).ready(function() {
    $('#inputField').focus(function() {
        console.log('Input field is focused');
    });
});

$('#inputField').on('focus', function() {
    console.log('Input field is focused');
});

$('body').on('focusin', '.dynamicElement', function() {
    console.log('Dynamic element is focused');
});