event对象和事件冒泡

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
        #div1 {
            width: 400px;
            height: 300px;
            background: #CCC;
            display: none;
        }
    </style>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById('btn1');
            var oDiv = document.getElementById('div1');
            oBtn.onclick = function (ev) {
                var oEvent = ev || event;//获取event对象的兼容性写法
                oDiv.style.display = 'block';
                oEvent.cancelBubble = true;//取消事件冒泡
            };
            document.onclick = function () {
                oDiv.style.display = 'none';
            };
        };
    </script>
</head>

<body>
<input id="btn1" type="button" value="显示"/>

<div id="div1">
</div>
</body>
</html>

运行结果（点击任意界面div消失）：
posted on 2016-03-22 08:38 Newbie_小白阅读(211) 评论(0) 收藏举报