举一个例子
如果你在D3上点击
鼠标,事件流就是这样的:
捕获阶段
检测是否有将useCapture在DIV1作为真实的事件
处理程序,如果是这样的话,
执行该程序,然后再处理格式。
在div3
目标阶段,
发现div3是节点,鼠标点击。所以这里是目标的阶段,如果有事件处理程序,然后执行该程序,不管是真的还是假的useCapture。
冒泡阶段检测是否有将useCapture为假的DIV2事件处理程序,如果是这样的话,执行该程序,然后DIV1再处理。
AddEventListener有三个
参数:第一个参数所代表的事件的名称(不包括,如单击);第二参数表示的
函数接收事件的处理;第三个参数是useCapture,本文解释了它。
请在这里点击鼠标。
无功outdiv = document.getelementbyid(outdiv );
无功middlediv = document.getelementbyid(middlediv );
VaR的个体= document.getelementbyid(个人);
VaR信息= document.getelementbyid(信息);
outdiv.addeventlistener(点击),
功能({ info.innerhtml =outdiv+;},假);
middlediv.addeventlistener(点击),功能({ info.innerhtml =middlediv+;},假);
InDiv.addEventListener(点击),功能({ info.innerhtml =个人+;},假);
以上是我们测试过的代码。根据信息
显示,确定触发
顺序。有三个
注册侦听器,而useCapture是真与假,所以2×2×2可以得到8个不同的程序。
当虚假的一切,触发序列入手,middlediv和outdiv。
如果真的是,触发序列outdiv,middlediv和个人。
outdiv是真实的,和其他
错误,触发顺序是:outdiv,个人,middlediv;
middlediv是真实的,和其他错误,触发顺序是:middlediv,个人,outdiv;
......
最后得出以下结论。
真的触发顺序总是在false之前;
如果多于一个为真,则外层的触发器由内层触发。
如果多于一个是false,则内层被触发在外层之前。