DOM的Event对象的默认行为冒泡行为及取消默认行为和取消冒泡

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。我们常见的事件对象，比如超链接的跳转，鼠标点击右键弹出菜单（和上下文相关）。事件对象的冒泡行为，某个事件发生之后会从里向外传播，就像泡泡从水里冒出来。由于众所周知的原因，对于标准浏览器的IE老版本浏览器，对于处理事件对象的行为，都有不同的方法，所以，在实际应用中需要考虑兼容性问题。有了事件的冒泡行为和默认行为，就有了阻止事件的冒泡和默认行为。注意这里针对FF的事件对象参数调用方法是

arguments.callee.caller.arguments[0]

所以，综合起来兼容性的写法是：

var e = evt || window.event || arguments.callee.caller.arguments[0];

阻止冒泡封装函数：

function stopBubble(evt) {
    var e = evt || window.event || arguments.callee.caller.arguments[0];
    if (e.stopPropagation) {
         //stopPropagation 是W3C的标准方法   
        e.stopPropagation();
    } else {
         // cancelBubble 是老版本IE的方法
        e.cancelBubble = true;
    }
}

阻止冒泡实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- some meta tags, important for SEO"-->
    <meta name="description" content="put a short description in here" />
    <meta name="keywords" content="put your important keywords in here" />
    <title>html5 demo!</title>
    <style type="text/css">
        div{
            padding: 10px;
        }
        .div1{
            line-height: 100px;
            height: 100px;
            border: 1px solid #eee;
            background: #eee;
        }
        .div2{
           line-height: 70px;
           height: 70px;
           border: 1px solid #ddd;
           background: #ddd;
       }
       .div3{
           line-height: 40px;
           height: 40px;
           border: 1px solid #ccc;
           background: #ccc;
       }
   </style>
   <script type="text/javascript">
    window.onload = function() {
        var div = document.getElementsByTagName('div')[2];
        div.onclick = function() {
            alert("div3");
            stopBubble();   //即使在行为之后，添加取消冒泡行为依然有效
        };
        function stopBubble(evt) {
            var e = evt || window.event || arguments.callee.caller.arguments[0];
            if (e.stopPropagation) {
                e.stopPropagation();
            } else {
                e.cancelBubble = true;
            }
        }
    };
</script>
</head>
<body>
    <div onclick='alert("div1");' class="div1">
        <div onclick='alert("div2");' class="div2">
            <div onclick='alert("div3");' class="div3">div3</div>
        </div>
    </div>
</body>
</html>

执行上面的代码发现，当执行了取消冒泡之后，点击最内的DIV3的时候执行相应的弹窗，如果不执行冒泡，则会依次弹窗内容Div3，Div2,DIv1.

阻止默认行为封装代码：

function stopDefault(evt) {
    var e = evt || window.event || arguments.callee.caller.arguments[0];
    if (e.preventDefault) {
        // preventDefault 是W3C的标准方法
        e.preventDefault();
    } else {
        // window.event.returnValue=false; IE方法
        e.returnValue = false;
    }
}

阻止默认行为实例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <!-- some meta tags, important for SEO"-->
    <meta name="description" content="put a short description in here" />
    <meta name="keywords" content="put your important keywords in here" />
    <title>html5 demo!</title>
    <style type="text/css">

    </style>
    <script type="text/javascript">
    window.onload = function() {
        var a = document.getElementById('a2');
        a.onclick = function() {
            //调用阻止默认行为
            stopDefault();
        };

        function stopDefault(evt) {
            var e = evt || window.event || arguments.callee.caller.arguments[0];
            if (e.preventDefault) {
                // preventDefault 是W3C的标准方法
                e.preventDefault();
            } else {
                // window.event.returnValue=fasle; IE方法
                e.returnValue = false;
            }
        }
    };
    </script>
</head>

<body>
 <p>1.不阻止超链接跳转</p>
<a href="http://www.baidu.com" title="打开新的页面" target="_blank" id="a1">打开百度</a>
<p>2.阻止超链接跳转</p>
<a href="http://www.baidu.com" title="打开新的页面" target="_blank" id="a2">不打开百度</a>
</body>

</html>