js关于冒泡事件与捕获事件的详解

Posted 2020-07-20

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js关于冒泡事件与捕获事件的详解相关的知识，希望对你有一定的参考价值。

直接上代码，复制黏贴到你的html页面点击下看看立刻明白，根本不用一堆话语来解释

<!DOCTYPE html>
<html>

    <head>
        <title>Bootstrap test</title>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--<link href="css/bootstrap.min.css" rel="stylesheet">-->

        <!--[if lt IE 9]>
         <script src="js/html5shiv.js"></script>
         <script src="js/respond.min.js"></script>
      <![endif]-->

        <!--<script src="js/jquery-1.12.4.min.js"></script>-->
        <!--<script src="js/bootstrap.min.js"></script>-->
        <style type="text/css">
            /*a {
                background: #cccccc;
                color: white;
                @link-color
            }
            */
            .box {
                width: 300px;
                height: 200px;
                border: 1px solid red;
            }
            
            .content {
                width: 200px;
                height: 180px;
                border: 1px yellowgreen solid;
            }
            
            .h11 {
                width: 150px;
                border: 1px blue solid;
            }
            
            /*@media screen and (max-width:960px) {
                body {
                    background: black
                }
            }*/
        </style>
    </head>

    <body>
        <h1>Hello, world!</h1>
        <div class="container">test</div>
        <div class="box">
            <div class="content">
                <h1 class="h11">woshiH1</h1>
            </div>

        </div>
    </body>

    <script>
//        window.onresize = function() {
//            console.log(document.body.clientWidth);
//        }

        function returnTar() {
            var e = e || window.event;
            var target = e.target || e.srcElement;
            return target.className.toLowerCase();
        }
        var hh = document.getElementsByClassName(‘h11‘)[0];
        var box = document.getElementsByClassName(‘box‘)[0];
        var content = document.getElementsByClassName(‘content‘)[0];
        hh.addEventListener(‘click‘, function() {
            console.log("小 冒泡 target: " + returnTar());
        }, false);
        hh.addEventListener(‘click‘, function() {
            console.log("小 捕获 target: " + returnTar());
        }, true);
        content.addEventListener(‘click‘, function() {
            console.log("中 冒泡 target: " + returnTar());
        }, false);
        content.addEventListener(‘click‘, function() {
            console.log("中 捕获 target: " + returnTar());
        }, true);
        box.addEventListener(‘click‘, function() {
            console.log("大 冒泡 target: " + returnTar());
        }, false);
        box.addEventListener(‘click‘, function() {
            console.log("大 捕获 target: " + returnTar());
        }, true);
    </script>

</html>

以上是关于js关于冒泡事件与捕获事件的详解的主要内容，如果未能解决你的问题，请参考以下文章

js阻止冒泡和默认事件（默认行为）详解

JS事件冒泡和事件捕获的详解

事件捕获与事件冒泡

React Native - PanResponder - 捕获冒泡机制详解

js函数中如何阻止事件冒泡

js——事件冒泡与捕获小例子