javascript 事件触发机制

Question

直入正题：

<div id="box" class="blue">
    box
    <div id="child-box" class="blue">
        child box
    </div>
</div>



<button id="btn">触发事件</button>



<

script>

    var evt = new Event('customEvent');

    var eventBox = document.getElementById('box');
    var eventChildBox = document.getElementById('child-box');

    function customEventCallback(e) {
        console.log('run ' + e.target.getAttribute('id'));
    }

    eventChildBox.addEventListener('customEvent', customEventCallback, false);
    eventBox.addEventListener('customEvent', customEventCallback, false);


    //测试代码
    var btn = document.getElementById('btn');

    btn.onclick = function(e) {
        eventChildBox.dispatchEvent(evt);
    };

为什么单击按钮只会触发一次，且输出是

run child-box

哪位大师能指点一下？

Answer 1

原来 target 是获取 事件流目标阶段 的对象

Answer 2

楼主，你还是多看看事件相关的内容再说哈

Answer 3

不是很明显吗，你只触发了eventChildBox的customEvent事件，并没有触发eventBox的事件