event Flow

最新推荐文章于 2023-02-07 15:59:13 发布

weixin_30659829

最新推荐文章于 2023-02-07 15:59:13 发布

阅读量57

点赞数

原文链接：http://www.cnblogs.com/tianshao/p/9945800.html

版权

事件流是什么？

DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到“单击此文本”文本节点，事件进入目标阶段，在目标阶段结束之后，事件由“单击此文本”文本节点开始事件的冒泡阶段，直到Document节点为止。（摘自百度百科）

Event Flow（事件流）是ActionScript 3.0中处理事件响应的机制。事件对象创建后，被Flash Player分配给指定的目标事件。事件对象穿过Display List（显示架构）的每个层次，到达目标事件。有些情况下，事件对象会以“起泡”的方式按原路线返回。这个在Display List中往返的过程叫做Event Flow（事件流）。事件流描述了事件对象如何在Display List中移动。Event Flow从概念上可以分为三个阶段，分别如下。

q capture phase(获取阶段)，这个阶段由Stage(舞台)上所有的目标结点的父结点组成。

q target phase(目标阶段)，这个阶段由单独的目标结点组成。

q bubbling phase(起泡阶段)，这个阶段由从目标结点的父结点返回到舞台的过程中相遇的结点组成。

两种事件流：

1. 冒泡事件流

当事件在某一DOM元素被触发时，例如用户在客户名字节点上点击鼠标，事件将跟随着该节点继承自的各个父节点冒泡穿过整个的DOM节点层次，直到它遇到依附有该事件类型处理器的节点，此时，该事件是onclick事件。在冒泡过程中的任何时候都可以终止事件的冒泡，在遵从 W3C标准的浏览器里可以通过调用事件对象上的stopPropagation()方法，在Internet Explorer里可以通过设置事件对象的cancelBubble属性为true。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。

2.捕获事件流

事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有祖先元素依次往下传递。在这个过程中，事件会被从文档根到事件目标元素之间各个继承派生的元素所捕获，如果事件监听器在被注册时设置了useCapture属性为true,那么它们可以被分派给这期间的任何元素以对事件做出处理；否则，事件会被接着传递给派生元素路径上的下一元素，直至目标元素。事件到达目标元素后，它会接着通过DOM 节点再进行冒泡。

语法
element.addEventListener(event, function, useCapture)
参数值

参数	描述
event	必须。字符串，指定事件名。
function	必须。指定要事件触发时执行的函数。
useCapture	可选。布尔值，指定事件是否在捕获或冒泡阶段执行。可能值:true - 事件句柄在捕获阶段执行 false- 默认。事件句柄在冒泡阶段执行

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style>
        #wrap {
            width: 200px;
            height: 200px;
            background: orange;
        }
        #outer {
            position: relative;
            top: 50px;
            left: 50px;
            width: 100px;
            height: 100px;
            background: #eeddff;
        }
        #inner {
            position: relative;
            top: 25px;
            left:25px;
            width: 50px;
            height: 50px;
            background: #44ddff;
        }
    </style> </head> <body> <div id="wrap"> <div id="outer"> <div id="inner"></div> </div> </div> </body> <script>
    var wrap = document.getElementById('wrap');
    var outer = document.getElementById('outer');
    var inner = document.getElementById('inner');

    wrap.addEventListener('click',function(){
        alert('789');
    },false);
    outer.addEventListener('click',function(){
        alert('456');
    },false);
    inner.addEventListener('click',function(){
        alert('123');
    },false);
    inner.addEventListener('click',function(){
        alert('inner');
    },true);
    wrap.addEventListener('click',function(){
        alert('wrap');
    },true);
    outer.addEventListener('click',function(){
        alert('outer');
    },true);
</script> </html>

（以上代码摘自https://segmentfault.com/a/1190000003497939）
点击查看此案例，我们会发现，首先是触发的是捕获阶段的事件，然后再触发的是冒泡阶段的事件。

转载于:https://www.cnblogs.com/tianshao/p/9945800.html

weixin_30659829

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
event Flow

事件流是什么？DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。DOM事件流最独特的性质是，文本节点也触发事件（在IE中不会），当鼠标单击“单击此文本”文本时会触发click事件，该事件的捕获阶段最先开始，从Document节点开始逐渐向下传播，直到...
复制链接

扫一扫