07 DOM事件流&事件冒泡的处理

DOM事件流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件流</title>
    <script>
    window.onload = function(){
        var oBtn = document.getElementById('btn');
        oBtn.addEventListener('click',function(){
            console.log('btn处于事件捕获阶段');
        }, true);
        oBtn.addEventListener('click',function(){
            console.log('btn处于事件冒泡阶段');
        }, false);

        document.addEventListener('click',function(){
            console.log('document处于事件捕获阶段');
        }, true);
        document.addEventListener('click',function(){
            console.log('document处于事件冒泡阶段');
        }, false);

        document.documentElement.addEventListener('click',function(){
            console.log('html处于事件捕获阶段');
        }, true);
        document.documentElement.addEventListener('click',function(){
            console.log('html处于事件冒泡阶段');
        }, false);

        document.body.addEventListener('click',function(){
            console.log('body处于事件捕获阶段');
        }, true);
        document.body.addEventListener('click',function(){
            console.log('body处于事件冒泡阶段');
        }, false);
    };
    </script>
</head>
<body>
    <a href="javascript:;" id="btn">按钮</a>
<!--1、addEventListener-->
<!--addEventListener 是DOM2 级事件新增的指定事件处理程序的操作，这个方法接收3个参数：-->
    <!--要处理的事件名、作为事件处理程序的函数和一个布尔值。-->
    <!--最后这个布尔值参数如果是true，表示在捕获阶段调用事件处理程序；-->
    <!--如果是false，表示在冒泡阶段调用事件处理程序。-->
<!--2、document、documentElement和document.body三者之间的关系：-->
<!--document代表的是整个html页面；-->
<!--document.documentElement代表的是`<html>`标签；-->
<!--document.body代表的是`<body>`标签；-->
<!--接着我们就来聊聊上面的例子中输出的结果为什么是这样：-->
<!--在标准的“DOM2级事件”中规定，事件流首先是经过事件捕获阶段，接着是处于目标阶段，最后是事件冒泡阶段。-->

    <!--控制台输出顺序如下-->
<!--首先在事件捕获过程中，document对象首先接收到click事件，然后事件沿着DOM树依次向下，一直传播到事件的实际目标，就是id为btn的a标签。-->
<!--接着在事件冒泡过程中，事件开始时由最具体的元素（a标签）接收，然后逐级向上传播到较为不具体的节点（document）。-->

</body>
</html>

 

事件冒泡的处理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件冒泡的处理</title>
    <style type="text/css">
        .father{
            width: 300px;
            height: 300px;
            background-color: red;
        }

    </style>
</head>
<body>
    <div class="father">
        <button>按钮</button>
        <a href="http://www.baidu.com" style="display: block">百度一下</a>
        <a href="http://www.baidu.com" style="display: block" id="a1">百度一下</a>
        <a href="http://www.baidu.com" style="display: block" id="a2">百度一下</a>
    </div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $('.father button').click(function (event) {
            console.log(event);  // 原生js的事件对象
            alert($(this).text());
            //阻止冒泡事件 比如body html document 如果也有点击事件,将不会执行 所以这里body点击事件不会执行
            event.stopPropagation();
        });

        $('a:eq(0)').click(function (e) {
            // 因为全都没有阻止 所以 后面父盒子 body的点击都将被执行,然后再执行默认事件-跳转百度
            alert('没有阻止默认事件也没有阻止冒泡!');
        });

        $('#a1').click(function (e) {
            e.stopPropagation();  // 阻止冒泡
            e.preventDefault();  // 阻止默认事件 指的是a标签的跳转 表单的提交 阻止这些
            alert('点击a1！');
            return false;
        });

        $('#a2').click(function (e) {
            alert('点击a2！');
            // 上面的两个阻止方法也可以写成这样 既阻止默认事件又阻止冒泡
            return false;
        });

        $('.father').click(function(event){
                alert('父亲被点击了');
                console.log('哈哈哈哈哈');
            });

        $('body').click(function(){
                alert('body被点击了');
            })
    </script>
</body>
</html>

 

抽屉评论收起模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽屉评论收起</title>
    <style>
        .box{
            height:400px;
            width: 300px;
            border:1px solid red;
            position: relative;
            display: none;
        }
        .closex{
            position: relative;
            float:right;
            cursor: pointer;
        }
        .shouqi{
            position: absolute;
            bottom: 0;
            right:0;
        }
    </style>
</head>
<body>
    <button id="btn1">评论</button>
    <div class="box">
        <span class="closex">X</span>
        <button class="shouqi" id="btn2">收起</button>
    </div>
    <script type="text/javascript" src="jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $('#btn1').click(function (e) {
//            $('.box').css('display','block');
            $('.box').stop().slideToggle(200);
            e.stopPropagation();
        });

        $('.closex,.shouqi').click(function () {
//            $('.box').css('display','none');
            $('.box').stop().slideUp(200);
            e.stopPropagation();
        });

        $('.box').click(function () {
            return false;
        });

        $(document).click(function () {
            $('.box').stop().slideUp(200);
        })
    </script>
</body>
</html>

 

posted @ 2019-07-02 11:43  毛斯钢  阅读(278)  评论(0)  编辑  收藏  举报