事件冒泡和阻止事件冒泡

<div id="box">
    <a href="#" id="link">哈哈</a>
</div>

     html结构中父盒子div包裹着链接a哈哈。给body、div、a都绑定一个点击事件，如下：

<script>
    window.onload = function () {
        var link = document.getElementById("link");
        var box = document.getElementById("box");
        var body = document.body;
        link.addEventListener("click", function (e) {
           console.log("1");
            e.stopPropagation();
        });
        box.addEventListener("click", function () {
           console.log("2");
        });
        body.addEventListener("click", function () {
            console.log("3");
        });
    };
</script>

addEventListener方法中有三个参数，第一个参数是事件名称，第二个参数是发生事件要执行的函数。第三个参数是boolean类型，事件捕获（true）和事件冒泡（false）。默认第三个参数是false。

当点击链接哈哈的时候，也相当于点击了div元素和body元素。所以控制台会输出1、2、3。这就是事件冒泡。

在link事件函数中加上e.stopPropagation()，用来阻止事件冒泡。

<script>
    window.onload = function () {
        var link = document.getElementById("link");
        var box = document.getElementById("box");
        var body = document.body;
        link.addEventListener("click", function (e) {
           console.log("1");
            e.stopPropagation();
        });
        box.addEventListener("click", function () {
           console.log("2");
        });
        body.addEventListener("click", function () {
            console.log("3");
        });
    };
</script>

这样再点击链接哈哈的时候，控制台只会输出1。