【JS】事件传播 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .outer {
            width: 400px;
            height: 400px;
            background-color: #fc4a62;
            margin: 0 auto;
        }

        .center {
            width: 300px;
            height: 300px;
            background-color: #4a7cfc;
            margin: 0 auto;
        }

        .inner {
            width: 200px;
            height: 200px;
            background-color: #dec318;
            margin: 0 auto;
        }
        ul{
            width: 400px;
            height: 30px;
            background-color: #fc4a62;
        }
        li{
            width: 100px;
            background-color: #fde348;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            cursor: pointer;
            float: left;
            margin-right:10px ;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="center">
        <div class="inner"></div>
    </div>
</div>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
<script>
    var outer=document.querySelector('.outer')
    var center=document.querySelector('.center')
    var inner=document.querySelector('.inner')
    //事件传播
    outer.onclick=function () {
        console.log("我是outer,我被点击了！")
    }
    center.onclick=function () {
        console.log("我是center,我被点击了！")
    }
    //阻止事件传播
    inner.onclick=function (e) {
        e.stopPropagation()
        console.log("我是inner,我被点击了！")
    }
//    事件委托
    var ul=document.querySelector('ul')
    ul.onclick=function (e) {
        console.log('点击事件触发')
        console.log(e.target)
        if (e.target.tagName==='LI'){
            console.log("你点击的是li")
        }
    }
</script>
</body>
</html>

posted @ 2022-07-19 16:43  木子欢儿  阅读(30)  评论(0)  编辑  收藏  举报