事件冒泡

一个元素触发自身事件的时候，如果它的父级元素也绑定了某个事件，这时父级元素绑定的事件也会跟着触发，这种触发会一直传递到window。

例子

有四个大小不同的div依次嵌套

<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="div4">

            </div>
        </div>
    </div>
</div>

<style>
    #div1 {
        width: 400px;
        height: 400px;
        background: #00f;
    }
    #div2 {
        width: 300px;
        height: 300px;
        background: #0f0;
    }
    #div3 {
        width: 200px;
        height: 200px;
        background: #f00;
    }
    #div4 {
        width: 100px;
        height: 100px;
        background: #000;
    }
</style>

我们给div1、div2、div3、div4添加一些事件

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
var div4 = document.getElementById('div4');
div1.onclick = function() {
    alert('div1');
}
div2.onclick = function() {
    alert('div2');
}
div3.onclick = function() {
    alert('div3');
}
div4.onclick = function() {
    alert('div4');
}

这时当我们点击div4（最小的黑色方块）时，可以发现浏览器依次弹出了"div4"、"div3"、"div2"和"div1",按理说点击div4只会触发div4的事件，这就是事件在其中搞得鬼，div4将触发事件传给父级div3，再这样一直传给div1。

解决方法

标准w3c方式：e.stopPropagation();
反人类IE方式：e.cancalBubble = true;
为了兼容浏览器，我们可以封装一个函数来阻止事件冒泡：

function stopBubble(e) {
    if(e && e.stopPropagation) {
        e.stopPropagation();//w3c
    }else {
        window.event.cancalBubble = true;//IE
    }
}

函数封装好后，我们只需要将函数放在需要阻止的地方即可，一旦阻止后，事件就会停止冒泡，例如在div4后面添加，只会触发div4事件，在div3后添加，div4触发后，div3再触发，这时就会停止冒泡。下面是只触发div4的代码：

var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
var div3 = document.getElementById('div3');
var div4 = document.getElementById('div4');
div1.onclick = function() {
    alert('div1');
}
div2.onclick = function() {
    alert('div2');
}
div3.onclick = function() {
    alert('div3');
}
div4.onclick = function(ev) {
    alert('div4');
    stopBubble(ev);//弹出div4的时候停止冒泡
}
function stopBubble(e) {
    if(e && e.stopPropagation) {
        e.stopPropagation();
    }else {
        window.event.cancalBubble = true;
    }
}

存在意义

存在即合理，事件冒泡有一个优点是用来做事件委托，有机会下面再写吧。