首页 > 试题广场 >

以下代码执行后输出结果为()?&l...

[单选题]
以下代码执行后输出结果为(      )?
<div id="box1">
    <div id="box2">
        content
    </div>
</div>
<script>
    const $ = document.querySelector.bind(document);
    const box1 = $('#box1');
    const box2 = $('#box2');
    
    box1.addEventListener('click', () => {
    console.log('box1 true');
    }, true);
    
    box1.addEventListener('click', () => {
    console.log('box1 false');
    }, false);
    
    box2.addEventListener('click', () => {
    console.log('box2 true');
    }, true);
    
    box2.addEventListener('click', () => {
    console.log('box2 false');
    }, false);
</script>
  • box1 true, box2 true, box2 false, box1 false
  • box1 true, box2 false, box1 false, box2 true
  • box2 false, box2 true, box1 false, box1 true
  • box1 true, box1 false, box2 true, box2 false
addEventListener的第三个参数规定事件在什么阶段触发,true是在捕获阶段触发,false(默认值)在冒泡阶段触发,由于事件触发是自dom从外向内传播,考虑box1和box2是上下堆叠的玻璃,光传过box1和box2到达后反射回来,光穿过的的顺序为box1 ->box2(捕获结束) -> box2->box1(冒泡结束)
发表于 2021-05-20 21:20:12 回复(0)