转自www.w3school.com.cn/htmldom/event_bubbles.asp

在 2 级 DOM标准中，事件传播分为三个阶段:

第一，捕获阶段。事件从 Document 对象沿着文档树向下一级一级传递给目标节点。如果目标的任何一个先辈注册了捕获事件句柄比如document.onkeydown=myonkeydown，那么在事件传播过程中马上运行这些句柄，而不等到传播到目标才执行。

第二个阶段发生在目标节点自身。直接注册在目标上的适合的事件句柄将运行。这与 0 级事件模型提供的事件处理方法相 。

第三，起泡阶段。在此阶段，事件将从目标元素向上传播回或起泡回 Document 对象的文档层次。

事件传播的当前阶段。它的 是下面的三个常量之一，它们分别表示捕获阶段、在目标对象上时和起泡阶段

1 CAPTURING_PHASE,

2 AT_TARGET,

3 BUBBLING_PHASE

下面是一个例子:"事件气泡秀"Bubble event show

 <html>

 <head>

 <script type="text/javascript">

 function foo1(){alert("foo1");}

 function foo2(){alert("foo2");}

 function foo3(){alert("foo3");}

 function foo4(){alert("foo4");}

 </script>

 </head>

 <body onclick="foo1()">

 <p onclick="foo2()">

 <em onclick="foo3()">

 <input type="text" onclick="foo4()">

 bubble event show

 </input>

 </em>

 </p>

 </body>

 </html>

Event事件的三个阶段的更多相关文章

  1. event 事件1

    1.事件流 1.1 事件冒泡 IE8- 浏览器支持的事件流是事件冒泡.事件冒泡是事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的节点(文档)的过程. <!doctype html&g ...

  2. event事件传播规则

    参考原文:https://my.oschina.net/u/1454562/blog/205010 event事件传播有三个阶段:捕获阶段.目标阶段.冒泡阶段 target.addEventListe ...

  3. [.NET] C# 知识回顾 - Event 事件

    C# 知识回顾 - Event 事件 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/6060297.html 序 昨天,通过<C# 知识回顾 - ...

  4. Event事件

    妙味课堂-Event事件 1.焦点:当一个元素有焦点的时候,那么他就可以接受用户的输入(不是所有元素都能接受焦点) 给元素设置焦点的方式: 1.点击 2.tab 3.js 2.(例子:输入框提示文字) ...

  5. JS学习笔记9之event事件及其他事件

    -->鼠标事件-->event事件对象-->默认事件-->键盘事件(keyCode)-->拖拽效果 一.鼠标事件 onclick ---------------鼠标点击事 ...

  6. JS(event事件)

    常用的event事件: 属性 此事件发生在何时... onabort 图像的加载被中断. onblur 元素失去焦点. onchange 域的内容被改变. onclick 当用户点击某个对象时调用的事 ...

  7. event事件学习小节

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. Javascript 事件对象（二）event事件

    Event事件: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  9. js event 事件兼容浏览器 ie不需要 event参数 firefox 需要

    js event 事件兼容浏览器    ie不需要 event参数   firefox 需要 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

随机推荐

  1. MySQL Infobright 数据仓库快速安装笔记[转]

    [文章作者:张宴 本文版本:v1.1 最后修改:2010.05.18 转载请注明原文链接:http://blog.zyan.cc/infobright/] Infobright是一个与MySQL集成的 ...

  2. StringUtils类使用 （转载）

    检查字符串是否为空或null或仅仅包含空格  String test = "";  String test1=" ";  String test2 = &quo ...

  3. 模式识别之不变矩---SIFT和SURF的比较

  4. git 安装及命令

    一.window下的git安装 1.安装教程 网上教程一堆.我參考的是这个:Git_Windows 系统下Git安装图解 还有这个也不错 2.环境搭建: 在配置完毕后,自己主动载入到系统环境变量中.如 ...

  5. 继承的文本框控件怎么响应EN_CHANGE等消息

    继承的文本框控件如何响应EN_CHANGE等消息?我从CEdit继承了一个CMyEdit类,想在这个类里填写它的一些消息.我在消息映射表里写的是MESSAGE_HANDLER(EN_CHANGE, O ...

  6. 用Cocoapods集成XMPPFramework 遇 Module 'KissXML' not found 问题

    用Coacopods集成XMPPFramework完成后Command + B,报Module 'KissXML' not found 一般来说,通过Coacopods集成集成第三方框架,不会再有依赖 ...

  7. css常用总结

    1.固定一个层在页面的位置,不受滚动条影响, 属性position:fixed,如: .tbar{ height:200px;width:60px;background-color:#666;posi ...

  8. final、finally、三个关键字的区别

    一 final 如果一个类被声明为final,意味着它不能再派生出新的子类,不能作为父类被继承.因此一个类不能既被声明为 abstract的,又被声明为final的.将变量或方法声明为final,可以 ...

  9. Package template (html/template) ... Types HTML, JS, URL, and others from content.go can carry safe content that is exempted from escaping. ... (*Template) Funcs ..

    https://godoc.org/text/template GoDoc Home About Go: text/templateIndex | Examples | Files | Directo ...

  10. Srvctl命令具体解释（10g）

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/lovedieya/article/details/28169481 Srvctl命令   Srvct ...