DOM事件传播模型

hyj1254

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

最近访客更多访客>>

jin361612388

古月小白恋红尘

洗碗小小笑

金元宝

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

编程心得

参考了如下链接，备忘一下：
DOM事件模型
见下图：

标准DOM2的事件传播模型分2个阶段：
首先是捕获阶段(capture prase)：从document对象起向下传播，直至到达目标对象(此过程IE不支持)。若目标对象的父节点注册了捕捉型的事件处理函数(见例1),则该函数会在事件到达目标对象前调用一次。
然后是起泡阶段：从目标对象起向document对象传播，即起泡(bulling)。若父节点注册了同类的事件处理函数，则也会调用。

<!docType html>
<html>
<head>
<style>
#outer ,#inner {border:1px solid blue;}
#outer {width:100px;height:100px;}
#inner {width:80px;height:80px;}
</style>
</head>
<body>
<div id="outer">
<div id="inner"></div>
</div>
<script><!--
var outer=document.getElementById('outer');
var inner = document.getElementById('inner');
outer.addEventListener('click',function(event){alert('out捕捉型事件');},true);
outer.addEventListener('click',function(event){alert('out非捕捉型事件');},false);
outer.addEventListener('dblclick',function(event){alert('out dbclick');},true);
inner.addEventListener('click',function(event){alert('in，捕获型事件');},true);
//--</script>
</body>
</html>

单击#out,则执行顺序：
out捕捉型事件==>in，捕获型事件==>out非捕捉型事件。
由于是单击，所以无论是向下还是向上传播都只会执行click事件，dbclick因此不执行。首先向下传播，在目标对象的父节点中只遇到了一个捕捉型事件；然后执行目标对象上的单击事件；再起泡(bulling)，执行父节点上对应的非捕获型单击事件，这也说明捕获型事件只在捕获阶段执行。
重要：chrome,ff没有完全遵循dom2标准，注意这一行：

inner.addEventListener('click',function(event){alert('in');},true);

它是目标对象，且注册了捕获型事件，dom2标准规定捕获型事件的设计初衷是让事件在传播到目标对象之前执行，因此其必须只能在目标对象的父节点上执行，而这里明显违背。

另外：不要将这里的capture阶段和IE事件模型中的setCapture混为一谈。后者用来捕获所有的鼠标事件(MouseEvent)，使得无论鼠标在哪里，即使移出了窗口也能触发鼠标事件。

分享到：

JS简易拖拽效果 | 想明白了，什么都是浮云

2011-07-31 22:15
浏览 1747
评论(0)
分类:Web前端
查看更多

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论