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

2022/2/7 17:16:31

编程Tag： javascript console 入门 height color Inner center ----- Outter

本文主要是介绍前端入门JavaScript-----事件（下），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

  <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>

这篇关于前端入门JavaScript-----事件（下）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章