Event Flow
l Capturing:
事件捕获阶段,如果一个按钮B1放在一个Panel P1容器当中,当我们讲P1注册点击事件EP,将B1注册点击事件EB,Panel p1的父容器为Application app;
b1.addEventListener(MouseEvent.CLICK,e1);
p1.addEventListener(MouseEvent.CLICK,e2);
app.addEventListener(MouseEvent.CLICK,e3);
此时,当我们点击B1的时候,发现EP同时也会得到出发;
从Root元素到点击的元素,中间的所有b1->parent所注册的同类时间都会触发,这种从根到鼠标实际点击的目标元素的过程叫做事件的捕获;
App-----àp1----------
l Targeting
目标阶段:此时当经历了capturing阶段以后,事件流流经鼠标直接点击的目标元素,此时目标元素上监听的事件监听器被触发,此时表现为EB被触发;
l Bubbing:
冒泡阶段:顾名思义,此时,事件流经过一次迭代流经了目标元素DOM树上所有节点以后,开始以冒泡的形势,往回流经所有的元素;此时的过程与捕获阶段正好相反;
b1.addEventListener(MouseEvent.CLICK,e1);
p1.addEventListener(MouseEvent.CLICK,e2);
app.addEventListener(MouseEvent.CLICK,e3);
的正常顺序分别是触发 e1(目标阶段)--àe2(冒泡阶段)---àe3(冒泡阶段)
b1.addEventListener(MouseEvent.CLICK,e1);
p1.addEventListener(MouseEvent.CLICK,e2,true);
app.addEventListener(MouseEvent.CLICK,e3,true);
addEventListener的第三个参数为use_capture,默认为false,表示此事件监听器在捕获阶段不触发,此时如果设置为true,则事件触发顺序为:
e3(捕获阶段)-àe2(捕获阶段)àe1(目标阶段)
b1.addEventListener(MouseEvent.CLICK,e1,true);
p1.addEventListener(MouseEvent.CLICK,e2,true);
app.addEventListener(MouseEvent.CLICK,e3,true);
如果设置为以上,则点击B1的时候相应的E1不会被触发,因为点击B1的为Targeting阶段,则这里表示E1只在capturing阶段被触发
1) 首先,设置其父监听器都是在非捕获阶段上相应时间;即use_capture为默认的false
2) 在E1的监听器中加上
e.stopImmediatePropagation();
这代表在事件流在此掐断,那么因为e2,e3均在e1之后执行,在e1此处掐断,避免了e2,e3的触发;
---------------------
作者:turkeyzhou
来源:CSDN
原文:https://blog.csdn.net/turkeyzhou/article/details/5305311