jQuery的事件

事件冒泡处理

使用event.stopPropagation();阻止事件冒泡

冒泡事件也可以使用return false来处理

并且

    <script type="text/javascript" src="jQuery3.3.1.js"></script>
    <script>
        $(function () {
            $('.box button').click(function (event) {
                alert('点击了button');
            });
            $('.box').click(function (event) {
                alert('点击了box');
                //事件冒泡阻止
                event.stopPropagation()
            })
        })
        /*事件冒泡，当一个div标签里面有一个button元素时
       给div与button绑定点击事件，当点击button的时候也会触发div绑定的事件
       jquery中只有事件冒泡阶段，没有puhuo
       事件冒泡阶段：button->body->html->document
       使用stopPropagation()可以处理事件冒泡这种情况
       或者使用return false也可以处理事件冒泡，不过return false也会处理默认的js事件，比如说a标签的跳转

         */
    </script>

jquery的事件

单双击事件

• 单击事件click()
• 双击事件dblclick()

一个按键同时绑定单击事件以及双击事件，两次单击中间的事件差是300毫秒，如果小于300毫秒，表示双击。假如小于300毫秒，也是表示调用了两次单击，一次双击。如果是单击

    <script type="text/javascript" src="jQuery3.3.1.js"></script>
    <script>
        $(function () {
            //解决单双击事件冲突问题
            var timeer = null;
            $('button').click(function () {
                //上来先把timer定时器清空了
                clearTimeout(timeer);
                //定时器，延时300毫秒
                timeer=setTimeout(function () {
                    console.log('单击了');
                },300)
            });
            $('button').dblclick(function () {
                //触发了双击事件也把定时器清空了
                clearTimeout(timeer);
                console.log('双击了')
            });
        })
    </script>

鼠标移入移出事件

• mouseover()移入

• mouseout()移出

• mouseenter()移入

• mouseleave()移出

• 合成事件

  • hover()这个是jquery中的合成事件，合成了mouseenter与mouseleave事件

<head>
    <meta charset="UTF-8">
    <title>合成事件</title>
    <style>
        .shop-car{
            position: relative;
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: #666;
        }
        .shop{
            width: 400px;
            height: 200px;
            display: none;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="shop-car">
        <span>购物车</span>
        <div class="shop"></div>
    </div>
    <script type="text/javascript" src="jQuery3.3.1.js"></script>
    <script>
        $(function () {
            $('.shop-car').hover(function () {
                $('.shop').stop().slideDown(500);
            },function () {
                $('.shop').stop().slideUp(500);
            })
        })
    </script>
</body>

表单事件

• select()事件，文本选中的时候会调用

<body>
<form action="#">
    <input type="text">
</form>
    <script type="text/javascript" src="jQuery3.3.1.js"></script>
    <script>
        $('input[type=text]').select(function () {
            console.log('内容被选中了')
        })
    </script>
</body>

• submit()事件

<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
    $(function () {
        //原声js的是onsubmit事件
        $('from').submit(function (e) {
            //阻止form表单的默认事件（submit触发form表单的action，往action发请求）
            e.preventDefault();

            //自定义去发请求
            console.log('form被submit了')
        })
    })
</script>

鼠标的聚焦，失焦，键盘事件

• focus()获得焦点:输入框标示闪烁
• blur()失去焦点:输入框标示不闪烁
• 键盘按键keyup()

<script type="text/javascript" src="jQuery3.3.1.js"></script>
<script>
    $('input[type=text]').keyup(function (e) {
        //e.keyCode是键盘的键码
        //可以通过键盘键码使用流程控制判断进行控制
        console.log(e.keyCode)
    })
</script>

事件委托

事件委托：利用事件冒泡原理，需要动态往父级元素里面添加标签，并且让新添加的标签拥有与兄弟标签一样的事件，可以使用事件委托

<body>
    <ul>
        <li>111</li>
        <li>222</li>
    </ul>
    <button>按钮</button>
    <script type="text/javascript" src="jQuery3.3.1.js"></script>
    <script>
        $(function () {
            //事件委托（如果是未来追加的元素，需要绑定事件，可以使用事件委托）
            //on() 第一个属性事件名，第二个属性是选择器，第三个是fun
            $('ul').on('click','li',function () {
                alert($(this).text())
            });
            //未来动态的往ul中追加了li标签，如果只是ul>li标签绑定了click事件，那么可以考虑使用事件委托
            $('button').click(function () {
                $('ul').append('<li>喵</li>')
            })
        })
    </script>
</body>