首页 > 编程语言> > 前端入门JavaScript-----事件（下）

前端入门JavaScript-----事件（下）

2022-02-07 15:05:44 作者：互联网

  <style>

        *{
            margin: 0;
            padding: 0;
        }

        div{
            margin: 20px auto;
            display: flex;
            justify-content: center;
            align-items: center;
           
        }
       .outter{
           width: 300px;
           height: 300px;
           background-color: pink;
       }

       .center{
           width: 180px;
           height: 180px;
           background-color: skyblue;
       }

       .inner{
           width: 100px;
           height: 100px;
           background-color: red;
       }
    </style>
</head>
<body>
    <div class="outter">
        <div class="center">
            <div class="inner"></div>
        </div>
    </div>



    <script>
        // 绑定事件

        // 获取到需要用到的元素
        var outter = document.querySelector(".outter");
        var center = document.querySelector(".center");
        var inner = document.querySelector(".inner");

        // 给三个元素都绑定点击事件
        outter.onclick = function(){
            console.log("我是 outer 元素，我被点击了！");
        };

        center.onclick = function(){
            console.log("我是 center 元素，我被点击了！");
        };

        inner.onclick = function(e){

            // 阻止事件
            e.stopPropagation();
            console.log("我是 inner 元素，我被点击了！");
        };
    </script>
</body>

标签：console,入门,color,JavaScript,height,-----,inner,outter,center
来源： https://blog.csdn.net/m0_61656944/article/details/122808952