事件响应链

先附一张老师的图:

这里少了一层html(当时懒得画)

比如说两个div嵌套,然后点击内层div时,外层div也会响应onclick,如

<div id="outer">
        <div id="inner"></div>
    </div>

 事件对象的stopPropagation方法,可以阻止事件的继续传播

<script>
    var outer = document.getElementById("outer");
    var inner = document.getElementById("inner");

    // 事件的传播分为捕获和冒泡两个阶段,通过行内属性和元素对象,onxxxx这两种方式添加的事件监听都是冒泡阶段的事件监听

    outer.onclick = function(){
        console.log("outer被点击了");
    }
    inner.onclick = function(e){
        console.log("inner被点击了");
        // 事件对象的stopPropagation方法,可以阻止事件的继续传播.
        e.stopPropagation();
    }
</script>