为什么click事件被触发两次？

Question

有人可以告诉我,为什么事件会被激活两次以下代码:http: //jsfiddle.net/m8heyzgz/3/ 请打开你的控制台,firefox或chrome有控制台并在点击'div1'后观察结果,那么事件遍历顺序将是:

• DIV3
• DIV2
• DIV1
• DIV3
• DIV2
• DIV1

据我所知,捕获阶段可以从上到下,冒泡阶段可以从目标到父节点.

我的问题为什么,它以相同的顺序被解雇了2次？

HTML:

<div id="div1">
    <div id="div2">
        <div id="div3">
            <form>
                <ul>
                    <li>
                        <label>                            
                            <div>
                                <div>div1</div>                            
                            </div>
                            <div>
                                <div>div2</div>                            
                            </div>
                            <div>                                  
                                <input type="checkbox" name="div3" value="div3" />
                            </div>
                        </label>
                    </li>
                </ul>
            </form>
        </div>
    </div>
</div>

JS:

var d1 = document.getElementById('div1');
var d2 = document.getElementById('div2');
var d3 = document.getElementById('div3');

var f = function(e) {
    console.log(e.currentTarget);
}

d1.addEventListener('click', f);
d2.addEventListener('click', f);
d3.addEventListener('click', f);

Answer 1

I.为什么订单相同？

2波的顺序是相同的,因为你只看到两个事件的冒泡阶段,而不是捕获.如果你想看到捕获,你的addEventListener的第三个参数(useCapture)应该是true.

II.为什么要开2次？

1. 当您单击标签的内容时,将从标签触发第一个单击事件.
2. 第二次单击事件是通过合成单击从标签的复选框触发的.

+1.什么是合成点击？

由程序代码启动的单击,而不是由输入设备启动.(它会触发点击事件.)

+2.为什么合成点击发生？

因为它是第4步的运行合成点击激活步骤算法.

+3.为什么这个算法由浏览器运行？

因为它尊重W3C的建议:

"标签元素的(...)激活行为(...)应该与平台的标签行为相匹配." "例如,在单击复选框标签检查复选框的平台上,单击标签(...)可能会触发用户代理在输入元素上运行合成点击激活步骤,就好像元素本身已由用户触发一样(...) "