JQuery事件

最新推荐文章于 2019-03-21 08:43:34 发布

SpecYue

最新推荐文章于 2019-03-21 08:43:34 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery

本文链接：https://blog.youkuaiyun.com/qq_34788903/article/details/86579745

JQuery 专栏收录该内容

17 篇文章

订阅专栏

本文探讨了在前端开发中如何使用jQuery进行事件的绑定与解绑，包括阻止事件冒泡和默认行为的方法，以及在实际场景如弹框操作中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

事件的绑定和解绑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#div1').bind('mouseover click',function (event) {//绑定事件:移动到div块上和点击
                alert($(this).html);

                $(this).unbind('mouseover');//取消鼠标移动到上面的事件
            })
        })
    </script>
    <style type="text/css">
        #div1{
            background-color: #f6b544;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div id="div1">

    </div>
</body>
</html>

绑定事件:移动到div块上和点击
解绑事件：取消鼠标移动到上面的事件

事件冒泡-阻止事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.son').click(function () {
                alert(1);
            });

            $('.father').bind('click',function () {
                alert(2);
            });

            $('.grandfather').bind('click',function () {
                alert(3);
            });
        })
    </script>

    <style type="text/css">
        .grandfather{
            width: 300px;
            height: 300px;
            background-color: green;
        }
        .father{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son">

            </div>
        </div>
    </div>
</body>
</html>

定义了三个div，在son点击一下弹出1，father点击一下弹出2，grandfather点击一下弹出3，如果我们点击son一下，那么会依次弹出123，点击father一下会依次弹出二三。
按照标签往上传到它的父级

事件冒泡有时候不需要，需要阻止，通过eventstopPropagation()来阻止

$('.son').click(function (event) {//event就是一个事件对象
                //用这个事件对象就能使用事件对象的方法
                alert(1);
                event.stopPropagation();//阻止事件对象冒泡
            });

除了阻止事件冒泡，还要阻止一些默认行为，开发中直接return false就行。

$('.father').bind('click',function () {
                alert(2);
                //阻止事件冒泡和阻止默认行为的同意写法
                return false;
            });

弹框

点击弹框外面关闭弹框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#btn').click(function () {
                 // alert(2);
                 $('.pop_con').fadeIn();
                 // alert(1);
                return false;//阻止事件，冒泡
            });
            $(document).click(function () {
                $('.pop_con').fadeOut();
            })
        })
    </script>
</head>
<style type="text/css">
    .pop{
        position: fixed;
        width: 500px;
        height: 300px;
        background-color: #fff;
        border: 3px solid #000;
        left: 50%;
        top: 50%;
        margin-left: -250px;
        margin-top: -150px;/*拉回去*/
        z-index: 2;
    }
    .mask{
        position: fixed;
        width: 100%;
        height: 100%;
        background-color: #000000;
        opacity: 0.3;
        filter:alpha(opacity=30);/*兼容ie浏览器的*/
        left: 0;
        top: 0;
        z-index: 1;/*z-index设置现实层级*/
    }
    .pop_con{
        display: none;/*因为pop_con包含住了mask和pop，所以设置了这个之后，他们就隐藏了*/
    }
</style>
<body>
    <input type="button" name="" value="弹出" id="btn">

    <div class="pop_con">
        <div class="pop">
            弹框里面的文字
        </div>
        <div class="mask"></div>
    </div>
</body>
</html>