AddEventListener()第三个参数useCapture(布尔)详细的分析

AddEventListener()第三个参数useCapture(布尔)详细的分析
举一个例子


如果你在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,则内层被触发在外层之前。
免责声明:本网信息来自于互联网,目的在于传递更多信息,并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益,请及时联系我们,本站将会在24小时内处理完毕。
相关文章
返回顶部