了解DOM的事件流

ronghao

浏览: 450181 次
性别:
来自: 北京

最近访客更多访客>>

qq85609655

wg199303

liugm1

zeal607

博主相关

博客

微博

相册

留言

关于我

博客专栏

: 张小庆，在路上
浏览量：8577

文章分类

社区版块

存档分类

博客分类：

技术

IE 浏览器 Mootools Safari Firefox

DOM事件标准定义了两种事件流，这两种事件流有着显著的不同并且可能对你的应用有着相当大的影响。这两种事件流分别是捕获和冒泡。和许多Web技术一样，在它们成为标准之前，Netscape和微软各自不同地实现了它们。Netscape选择实现了捕获事件流，微软则实现了冒泡事件流。幸运的是，W3C决定组合使用这两种方法,并且大多数新浏览器都遵循这两种事件流方式。

默认情况下，事件使用冒泡事件流，不使用捕获事件流。然而，在Firefox和Safari里，你可以显式的指定使用捕获事件流，方法是在注册事件时传入useCapture参数，将这个参数设为true。下面用个例子分别来测试这两种事件流。

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

测试的HTML文件，其中用到了mootools-release-1.11.js，对mootools的代码进行了改动：

addListener: function(type, fn,setCapture){
            if (this.addEventListener) this.addEventListener(type, fn, setCapture);
            else {
                this.attachEvent('on' + type, fn);
                if (setCapture) this.setCapture(true);
            }
            return this;
        }

给addListener方法里增加了setCapture参数，用于测试捕获事件流。

<body>
<div  id="dd1-ct" style="width:400px;height:400px;border:1px solid #999;padding:2px">Container
    <div id="dd1-item1" style="width:200px;height:200px;border:1px solid #999;padding:2px">Item1
        <div  id="dd1-item2" style="width:100px;height:100px;border:1px solid #999;padding:2px">Item2</div>
    </div>   
</div>
<div id='rh'></div>
</body>

效果：

js:

fn1=function(e){
//    e.stopPropagation();
    $('rh').innerHTML+='Item1 clicked!******';
};

fn2=function(e){
//    e.stopPropagation();
    $('rh').innerHTML+='Item2 clicked!-------';
};

fn=function(e){
//    e.stopPropagation();
    $('rh').innerHTML+='Container clicked!&&&&&&&&';
};
    
$('dd1-item2').addListener('click', fn2.bindWithEvent(),false);        
$('dd1-item1').addListener('click', fn1.bindWithEvent(),false);
$('dd1-ct').addListener('click', fn.bindWithEvent(),false);

测试结果ie和ff下效果一致：单击item2,会依次触发fn2、fn1、fn;单击item1,会依次触发fn1、fn;单击Container,只会触发fn;当在任何一个事件处理器里调用e.stopPropagation();都会阻止事件的冒泡。

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

a、ff
事件从从DOM层次的根开始往下传递时，会被useCapture属性为true的事件监听器所捕获，而到达目标元素再从目标元素冒泡时，则会被useCapture属性为false的事件监听器所捕获。当在任何一个事件处理器里调用e.stopPropagation();都会阻止事件的传播。

Internet Explorer略微偏离了这里的事件捕获机制，或者说IE不支持捕获事件流。

b、ie6
支持setCapture()方法。
第一种情况：

$('dd1-item2').addListener('click', fn2.bindWithEvent(),true);        
$('dd1-item1').addListener('click', fn1.bindWithEvent(),true);
$('dd1-ct').addListener('click', fn.bindWithEvent(),true);

单击浏览器的任何位置，都只是触发fn；

第二种情况：

$('dd1-item2').addListener('click', fn2.bindWithEvent(),true);        
$('dd1-item1').addListener('click', fn1.bindWithEvent(),true);
$('dd1-ct').addListener('click', fn.bindWithEvent(),false);

单击浏览器的任何位置，会依次触发fn1、fn;

第三种情况：

$('dd1-item2').addListener('click', fn2.bindWithEvent(),true);        
$('dd1-item1').addListener('click', fn1.bindWithEvent(),false);
$('dd1-ct').addListener('click', fn.bindWithEvent(),false);

单击浏览器的任何位置，会依次触发fn2、fn1、fn;

结论：如果HTML元素捕获了通过该元素的setCapture()方法对这个元素的设置，依附于该元素的处理器将会被事件触发，即使setCapture()方法被调用的这个元素不在目标元素的祖先路径中。事实上你甚至单击浏览器的非页面部分都会触发事件处理器。并且事件一旦被捕获就不会继续再往下传播（即使该元素在目标元素的祖先路径中），而是立刻冒泡。e.stopPropagation();会阻止事件的冒泡。

c、ie7
测试效果与冒泡事件流一致。不再支持setCapture()方法。
结论：正如mootools所做的，避免捕获事件流。

谢谢hax的回复，纠正了我的错误。

查看图片附件

分享到：

一些工作流管理权限的分析 | 讨论一下你觉得一个工作流产品好的标准

2008-03-02 15:01
浏览 2951
评论(4)
论坛回复 / 浏览 (4 / 5120)
分类:Web前端
查看更多

4 楼 ronghao 2008-03-03

谢谢hax的回复，重新编辑了。

3 楼 hax 2008-03-03

ronghao 写道

你的意思是IE里就没有实现捕获事件流？

是的。setCapture()的含义是完全不同的。

2 楼 ronghao 2008-03-03

hax 写道

IE的setCapture()跟capture事件流根本不是一回事情，楼主不要混淆了。

IE里只有bubble，不支持w3c标准的事件模型中的其他部分。

setCapture()是用来让一个元素截获一次超出其范围之外（甚至超出浏览器的范围，这显然可以用来干坏事，也许正是因此，ie7做了改变）的事件，但是通常这次事件结束后，setCapture会被自动复位。setCapture的用途主要是用于drag&drop。

你的意思是IE里就没有实现捕获事件流？

1 楼 hax 2008-03-02

发表评论

您还没有登录,请您登录后再发表评论