document和document.body的区别

Document与Body事件捕获

最新推荐文章于 2024-02-01 16:06:55 发布

xiliuhu

最新推荐文章于 2024-02-01 16:06:55 发布

阅读量3.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： function html

本文链接：https://blog.youkuaiyun.com/xiliuhu/article/details/2876762

Javascript 专栏收录该内容

44 篇文章

订阅专栏

本文通过一个示例展示了在HTML文档中document与document.body在事件处理上的差异。通过为两者分别添加点击事件监听器，并设置不同的响应行为，演示了它们在页面视图上的实际效果。

二者的区别从html代码中看是非常明显的，document包括全部，而document.body只包括<body></body>标签中的内容；可二者在页面视图上的区别也很简单，但似乎不太引人注意！以下代码作为演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <style type="text/css">
        .big{width:200px;height:40px; background-color:Aqua;}
        .little{width:100px; height:20px; background-color:Blue;}
    </style>
</head>
<body>
    <div class="big" id="big">
        <div class="little" id="little"></div>
    </div>
    
    <script type="text/javascript">
        //FF,Chrome
        if(window.addEventListener){    
            document.addEventListener('click',function(e){alert('document');},false);
            document.body.addEventListener('click',function(e){alert('document.body');e.cancelBubble=true;},true);
        }
        //IE 
        else if(window.attachEvent){
            document.attachEvent('onclick', function(e){alert('document');});
            document.body.attachEvent('onclick', function(e){alert('document.body');e=e||window.event;e.cancelBubble=true;});
        }
    </script>
</body>
</html>