事件捕获和事件冒泡

默认是冒泡

addEventListener第三个参数默认为 false 代表执行事件冒泡行为。

当为 true 时执行事件捕获行为。

<div id="box">
    <div id="outer">
        <div id="inner"></div>
    </div>
</div>
<style>
    #box {
        width: 200px;
        height: 200px;
        background: #222;
    }
    #outer {
        width: 100px;
        height: 100px;
        background: #ddd;
    }
    #inner {
        width: 50px;
        height: 50px;
        background: #eee;
    }
</style>
<script>
    var outer = document.getElementById("outer");
    var inner = document.getElementById('inner');
    var oBox = document.getElementById('box');
    oBox.addEventListener("click", function () {
        alert('1');
    }, true)
    oBox.addEventListener("click", function () {
        alert('4');
    }, false)
    outer.addEventListener("click", function () {
        alert("2");
    }, true);
    inner.addEventListener("click", function () {
        alert('3.2')
    }, false)

    inner.addEventListener("click", function () {

        alert("3.1");

    }, true);


</script>