SOURCE

    var waiceng = document.getElementById('waiceng');
    var neiceng = document.getElementById('neiceng');
    neiceng.addEventListener('click', function(e){
        // 输出true，因为当前的元素就是目标元素
        console.log(e.target === e.currentTarget);
    }, false);
    waiceng.addEventListener('click', function(e) {
        // 输出neiceng，因为目标元素是内层，外层只是在内层被触发的过程中被触发的
        console.log(`触发了外层的事件，target为：${e.target.id}`)

        // 输出waiceng，因为这个外层元素绑定的事件被触发的时候，当前元素是waiceng
        console.log(`触发了外层的事件，currentTarget为：${e.currentTarget.id}`)
    }, false);  


        neiceng.addEventListener('click', function(e){
        // 输出true，因为当前的元素就是目标元素
        console.log(e.target === e.currentTarget);
    }, true);
    waiceng.addEventListener('click', function(e) {
        // 输出neiceng，因为目标元素是内层，外层只是在内层被触发的过程中被触发的
        console.log(`捕获阶段：触发了外层的事件，target为：${e.target.id}`)

        // 输出waiceng，因为这个外层元素绑定的事件被触发的时候，当前元素是waiceng
        console.log(`捕获阶段：触发了外层的事件，currentTarget为：${e.currentTarget.id}`)
    }, true);  

<div id="waiceng" style='with:300; height:300px'>
    <button id="neiceng" with='200px'>我是内层按钮</button>
</div>