Flex or JS Event Flow

Flex Event和JS Event一样，都存在一个事件流，这个事件流常常会导致一些啼笑皆非的Bug以及错误； 

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阶段被触发；

 

 

 

我们常常有要求，希望在点击b1的时候，不去触发别的元素上面(父元素)的监听器，但是经过上面的分析，我们发现，不管我们如何设置use_capture,其父元素上面的监听器都被触发，只是不同的的阶段导致触发顺序不同而已，那么，我们如何做呢？

 

1)  首先，设置其父监听器都是在非捕获阶段上相应时间;即use_capture为默认的false

2)  在E1的监听器中加上

e.stopImmediatePropagation();

这代表在事件流在此掐断，那么因为e2,e3均在e1之后执行，在e1此处掐断，避免了e2,e3的触发；

 

**验证事件相应的时候，不要利用Alert等进行验证，Alert弹出顺序为异步执行