JavaScript Event学习第八章：事件的顺序

根基题目很简朴。假设你的一个元素包括在其它一个元素中。

-----------------------------------<BR>| element1 |<BR>| ------------------------- |<BR>| |element2 | |<BR>| ------------------------- |<BR>| |<BR>-----------------------------------<BR>

这两个元素都有onclick变乱处理赏罚措施。假如用户在element2上面单击那么在元素2和元素1上都触发了单击变乱。可是哪个变乱先产生呢？哪个变乱处理赏罚措施会先执行呢？换句话说，变乱次序（event order）是什么呢？

两种模式
毫无疑问的，Netscape和微软在已往那段很糟糕的日子里都做出了本身的抉择。
Netscape说element1先产生的。这叫变乱捕捉（event capturing）。
微软认为element2先产生的。这叫变乱冒泡（event bubbling）。
这两种变乱次序恰恰相反。IE只支持变乱冒泡。Mozilla，Opera 7和Konqueror两种都支持。早一些的Opear和iCab赏识器两个都不支持。

变乱捕捉
当你行使变乱捕捉的时辰

| |<BR>---------------| |-----------------<BR>| element1 | | |<BR>| --------- --| |----------- |<BR>| |element2 / | |<BR>| ------------------------- |<BR>| Event CAPTURING |<BR>-----------------------------------<BR>

element1的变乱处理赏罚措施会先执行，element2后执行。

变乱冒泡
但你行使变乱冒泡的时辰

/ <BR>---------------| |-----------------<BR>| element1 | | |<BR>| ---------- -| |----------- |<BR>| |element2 | | | |<BR>| ------------------------- |<BR>| Event BUBBLING |<BR>-----------------------------------<BR>

element2的变乱处理赏罚措施会先执行，element1的变乱处理赏罚措施后执行。

W3C模式
W3C抉择在这场战役中保持重力。在W3C变乱模子中任何变乱产生都是起首被捕捉直到达到方针元素，然后再冒泡。

| | / <BR>-----------------| |--| |-----------------<BR>| element1 | | | | |<BR>| ----------- --| |--| |----------- |<BR>| |element2 / | | | |<BR>| -------------------------------- |<BR>| W3C event model |<BR>------------------------------------------<BR>

作为计划师的你，可以随意选择把变乱处理赏罚措施注册在捕捉照旧冒泡阶段。通过之前高级模式内里先容的addEventListener()要领就可以完成。假如最后一个参数是true那么就配置成为变乱捕捉，假如是false就配置为变乱冒泡。

假设你这样写

element1.addEventListener('click',doSomething2,true)<BR>element2.addEventListener('click',doSomething,false)<BR>

假如用户在element2上单击就会产生下面的工作：
1、click变乱产生在捕捉阶段。这样看来，假如element2的任何一个父元素有onclick变乱处理赏罚措施那么城市执行。
2、变乱在element1上发明白doSomething2()，那么就会执行它。
3、变乱向下转达直到方针自己，再没有其他的捕捉阶段措施了。变乱转而进入冒泡阶段然后就会执行doSomething()，也就是element2注册在冒泡阶段的变乱处理赏罚措施。
4、变乱再向上转达再搜查是否有父元素在冒泡阶段配置变乱处理赏罚措施。这里没有，以是什么也不会产生。

反过来：

element1.addEventListener('click',doSomething2,false)<BR>element2.addEventListener('click',doSomething,false)<BR>

此刻假如用户在element2上面点击就会产生：
1、变乱click产生在捕捉阶段。变乱会查找element2的父元素是否有在捕捉阶段注册变乱处理赏罚措施，在这里没有。
2、变乱向下转达直到方针自己。然后开始冒泡阶段，执行dosomething()，这个是注册在element2冒泡阶段的变乱处理赏罚措施。
3、变乱继承向上转达然后搜查是否有父元素在冒泡阶段注册了变乱处理赏罚措施。
4、变乱发明白element1.然后doSomething2()就被执行了。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!