Javascript 事件冒泡

先来看个Javascript 事件冒泡的例子. 在div 元素中有一个button，他们都绑定了一个click事件，这是能够产生事件冒泡的前提。当你单击button的时候，会弹出两个警告框，一个是button的click事件引起的，另一个是div的click事件产生的。你只单击了button，div的元素也触发了click事件，这就是事件冒泡引起的。

<html>
    <head>
        <title>event bubble sample</title>
    </head>
<body>
    <div style=" 200px;height: 200px;background-color: #483d8b" id="myDiv">
        <input type="button" value="button" id="btn" />
    </div>
    <script type="text/javascript">
        var div = document.getElementById("myDiv");
        div.addEventListener("click", function(event) {
            alert("this is div click");
        });
        var btn = document.getElementById("btn");
        btn.addEventListener("click", function(event) {
            alert("this is button click");
        });
    </script>
</body>
</html>

既然已经知道什么是时间冒泡了，那么该如何避免这种情况的出现呢。(在一般情况下，我们是不希望事件冒泡产生的副作用的)

1.使用stopPropagation(). 只需要在上面的button 事件绑定的时候，添加上event的这个方法。如下所示：

        btn.addEventListener("click", function(event) {
            alert("this is button click");
            event.stopPropagation();
        });

这个时候就只会触发button的click事件，div的click事件不会触发。

上面这个方法是最简便，改动最小的写法。那还有没有更好的方法呢！！！

2.使用事件委托。事件委托就是把事件不直接定义在目标元素上，而是定义在它的外层节点上。这其实是利用了事件冒泡技术来实现的。

        var div = document.getElementById("myDiv");
        div.addEventListener("click", function (event) {
            switch (event.target.id) {
            case "myDiv":
                alert("this is div click");
                break;
            case "btn":
                alert("this is button click");
                break;
            }
        });

这时只会触发一次click事件。

事件委托还不止这一个好处：

1.减少dom操作的次数，提高性能。

2.整个页面占用的内存也更少，提高性能。

3.如果一会button会被以除掉，也不用担心会遗忘remove掉button的绑定事件了。