事件流机制分为三个阶段:捕获、目标、冒泡。
addEventListener默认关闭了捕获阶段,打开冒泡阶段。并且捕获和冒泡阶段貌似是不能共存的。
比如说有abc三个容器。同时对abc三个容器进行单击监听。
a.addEventListener(MouseEvent.CLICK,clickHandle);
b. addEventListener(MouseEvent.CLICK,clickHandle);
c. addEventListener(MouseEvent.CLICK,clickHandle);
我单击了c容器。
1、首先执行的是目标阶段。也就是我鼠标单击事件的目标是c容器,执行c容器的clickHandle函数。目标阶段完成。
2、冒泡阶段:将单击的事件冒泡上去,b获得了单击事件,执行clickHandle函数。然后就是c获得单击事件,执行clickHandle函数。
二、打开捕获
打开捕获阶段是怎么样的呢?
我单机了c容器。
1、捕获开始。a捕获到了单击事件执行函数。然后是b捕获到了单击事件执行函数。捕获阶段结束。
addEventListener默认关闭了捕获阶段,打开冒泡阶段。并且捕获和冒泡阶段貌似是不能共存的。
比如说有abc三个容器。同时对abc三个容器进行单击监听。
a.addEventListener(MouseEvent.CLICK,clickHandle);
b. addEventListener(MouseEvent.CLICK,clickHandle);
c. addEventListener(MouseEvent.CLICK,clickHandle);
我单击了c容器。
1、首先执行的是目标阶段。也就是我鼠标单击事件的目标是c容器,执行c容器的clickHandle函数。目标阶段完成。
2、冒泡阶段:将单击的事件冒泡上去,b获得了单击事件,执行clickHandle函数。然后就是c获得单击事件,执行clickHandle函数。
二、打开捕获
打开捕获阶段是怎么样的呢?
我单机了c容器。
1、捕获开始。a捕获到了单击事件执行函数。然后是b捕获到了单击事件执行函数。捕获阶段结束。
2、目标阶段开始。事件流终于流到了目标c,执行c的clickHandle函数。
总结:
1、捕获关闭后,顺序cba,由目标冒泡到父容器,一层一层上去。捕获打开后,顺序abc,由父容器一层一层下去直到目标事件。
2、事件evt:MouseEvent中evt的重要属性有:evt.target(事件目标,指c)、evt.currentTarget(当前事件所处的目标,指冒泡或者捕获阶段当前目标)。