事件及如何阻止事件冒泡

事件是什么？
事件是指，javascript与文档或浏览器发生特定交互的瞬间。
事件分为三个阶段执行：
事件捕获阶段；
处理目标阶段；
事件冒泡阶段；

注意：IE下没有事件捕获阶段，只有处理目标和事件冒泡阶段

event对象 代表当前事件的状态，例如触发event对象的元素、鼠标位置及状态、
按下的按键等等。

什么是冒泡，捕获型事件是自上而下，而冒泡型事件是自下而上的，举个例子

css部分：
<style type="text/css">
            #box1 {
                width: 300px;
                height: 300px;
                background-color: red;
            }
            
            #box2 {
                width: 200px;
                height: 200px;
                background-color: green;
            }
        </style>
html部分：
<div id="box1">
    <div id="box2"></div>
</div>
js部分：
            document.getElementById("box2").onclick = function() {  
                alert("我是box2")；
            }

            document.getElementById("box1").onclick = function() {
                alert("我是box1");
            }

            document.body.onclick = function() {
                alert("我是body");
            }

上面的代码大家可以自己去执行以下，我们发现，当点击box2时，不只会弹出“我是box2”，还会继续弹出“我是box1”及“我是body”，这就是事件产生了冒泡，很明显，我们并不希望这样的事情发生，所以，我们需要阻止事件冒泡。

这里就不过多赘述，直接上代码，我们需要用event来监听事件
这里的e，就是监听事件的形参，为了让大家看的更明白，我用上面的例子来做演示

if(e.stopPropagation()) {
                    //非IE的
                    e.stopPropagation();

                } else {
                    //IE阻止冒泡
                    e.cancelBubble();

                }

    document.getElementById("box2").onclick = function(e) {

                //获取event对象
                var e = e || window.event;

                alert("我是box2");

                // 阻止冒泡
                if(e.stopPropagation()) {
                    //非IE的
                    e.stopPropagation();

                } else {
                    //IE阻止冒泡
                    e.cancelBubble();

                }

            }

此时，阻止了事件冒泡，再点击box2时，就只会弹出“我是box2”。