jQuery表单事件之blur与focus事件，jQuery基础(三)

index.html
<!DOCTYPE html>
<html>
 
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
        width: 500px;
        height: 50px;
        padding: 5px;
        margin: 5px;
        float: left;
        border: 1px solid #ccc;
    }
 
    .left div {
        background: #bbffaa;
    }
 
    .right div {
        background: yellow;
    }
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>
 
<body>
    <h4>.focusin与blur</h4>
    <div class="left">
        <div class="aaron">
            点击触发焦点(无反应)：
            <input type="text" />
        </div>
        <div class="aaron1">
            点击触发焦点并冒泡：
            <input type="text" />
        </div>
    </div>
    <script type="text/javascript">
    $(".aaron").focus(function() {
        $(this).css('border', '2px solid red')
    })
    $(".aaron1").focusin(function() {
        $(this).find('input').val('冒泡捕获了focusin事件')
    })
    </script>
 
 
    <h4>.focusout与blur</h4>
    <div class="right">
        <div class="aaron3">
            点击触发失去焦点(无反应)：
            <input type="text" />
        </div>
        <div class="aaron4">
            点击触发失去焦点并冒泡：
            <input type="text" />
        </div>
    </div>
    <script type="text/javascript">
    $(".aaron3").blur(function() {
        $(this).css('border', '2px solid red')
    })
    $(".aaron4").focusout(function() {
        $(this).find('input').val('冒泡捕获了focusout事件')
    })
 
    </script>
 
</body>
 
</html>
jQuery表单事件之blur与focus事件

任务
