DOM事件传播模型

最新推荐文章于 2022-10-26 22:50:00 发布

iteye_18009

最新推荐文章于 2022-10-26 22:50:00 发布

阅读量198

点赞数

分类专栏：编程心得

本文链接：https://blog.csdn.net/iteye_18009/article/details/82100434

版权

编程心得专栏收录该内容

27 篇文章

订阅专栏

参考了如下链接，备忘一下：
[url=http://jonsion.iteye.com/blog/1095853]DOM事件模型[/url]
见下图：
[img]http://www.w3.org/TR/2010/NOTE-xml-events2-20101216/images/event-flow.png?[/img]
标准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)，执行父节点上对应的非捕获型单击事件，这也说明捕获型事件只在捕获阶段执行。
[b]重要[/b]：chrome,ff没有完全遵循dom2标准，注意这一行：

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

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

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