javascript addEventListener－事件流

最新推荐文章于 2024-07-01 16:22:16 发布

志波同学

最新推荐文章于 2024-07-01 16:22:16 发布

阅读量8.4k

点赞数

分类专栏： javascript编程文章标签： javascript border function xhtml encoding flex

本文链接：https://blog.csdn.net/claram/article/details/6124422

版权

javascript编程专栏收录该内容

20 篇文章 0 订阅

订阅专栏

当一个事件发生时，分为三个阶段：

捕获阶段从根节点开始顺序而下，检测每个节点是否注册了事件处理程序。如果注册了事件处理程序，并且 useCapture 为 true，则调用该事件处理程序。（IE 中无此阶段。）

目标阶段触发在目标对象本身注册的事件处理程序，也称正常事件派发阶段。

冒泡阶段从目标节点到根节点，检测每个节点是否注册了事件处理程序，如果注册了事件处理程序，并且 useCapture 为 false，则调用该事件处理程序。

js的事件流机制类似与flex的事件流机制，流程图如下：

addEventListener方法的第三个参数就是用来控制事件是执行捕获阶段还是冒泡阶段。以下是示例代码，不支持ie。

<?xml version="1.0" encoding="gb2312"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="zh-cn" /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>useCapture</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">#outDiv { padding:10px 10px 10px 10px; border:1px solid red; } #middleDiv { padding:10px 10px 10px 10px; border:1px solid green; } #inDiv { padding:10px 10px 10px 10px; border:1px solid blue; }</style> </head> <body> <div id="outDiv"> <div id="middleDiv"> <div id="inDiv">请在此点击鼠标。</div> </div> </div> <div id="info"></div> <mce:script language="javascript" type="text/javascript"></mce:script> </body> </html>