事件冒泡分析[二]

Fade Away

于 2019-04-15 20:28:49 发布

阅读量101

点赞数

分类专栏：事件冒泡和捕获

本文链接：https://blog.csdn.net/qq_26239917/article/details/89320004

版权

事件冒泡和捕获专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <title>event</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            background-color: pink;
        }
        /* #obj1{
           background: pink; 
        } */
        #obj2{
            background: saddlebrown; 
        }
        #obj3{
            background: darkblue; 
        }
    </style>
</head>
<body>
    <div id="obj1">
        <h5 id="obj2">hello</h5>
        <h5 id="obj3">world</h5>
    </div>
    <script type="text/javascript">
        var obj1=document.getElementById('obj1');
        var obj2=document.getElementById('obj2');
        var obj3=document.getElementById('obj3');
        obj1.addEventListener('click',function(){
            alert('最外层的点击');
        },false);
        obj2.addEventListener('click',function(){
            alert('HELLO 的点击');
        })
        obj3.addEventListener('click',function(){
            alert('WORLD 的点击');
        })
    </script>
</body>
</html>