Posted on 2008-12-21 09:57
鱼跃于渊 阅读(220)
评论(0) 编辑 收藏 所属分类:
javascript相关
说到 addEventListener 不得不说到事件流，先说事件流对后面的解释比较方便。
当一个事件发生时，分为三个阶段：
捕获阶段 从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。（IE 中无此阶段。）
目标阶段 触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段。
冒泡阶段 从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCapture 为 false，则调用该事件处理程序。
举例
1 <div id="div1">
2 <div id="div2">
3 <div id="div3">
4 <div id="div4">
5 </div>
6 </div>
7 </div>
8 </div>
如果在 d3 上点击鼠标，事件流是这样的：
捕获阶段 在 div1 处检测是否有 useCapture 为 true 的事件处理程序，若有，则执行该程序，然后再同样地处理 div2。
目标阶段 在 div3 处，发现 div3 就是鼠标点击的节点，所以这里为目标阶段，若有事件处理程序，则执行该程序，这里不论 useCapture 为 true 还是 false。
冒泡阶段 在 div2 处检测是否有 useCapture 为 false 的事件处理程序，若有，则执行该程序，然后再同样地处理 div1。
注意，上述捕获阶段和冒泡阶段中，实际上 div1 之上还应该有结点，比如有 body，但这里不讨论。