转自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. centos6.4中文输入法安装和切换（转载）

    1.用root登录,或者切换到root账户(su root): 2.yum install "@Chinese Support"; 3.exit: 4.System→prefere ...

  2. 【MatConvNet】配置GPU

    参照大神的方法:http://www.th7.cn/system/win/201603/155182.shtml 第一步:需要安装cuda.VS2013:cuda默认路径,注意cuda版本和GPU要匹 ...

  3. iOS8 Push Notifications

    本文转载至 http://blog.csdn.net/pjk1129/article/details/39551887   原贴地址:https://parse.com/tutorials/ios-p ...

  4. 【BZOJ2111】[ZJOI2010]Perm 排列计数 组合数

    [BZOJ2111][ZJOI2010]Perm 排列计数 Description 称一个1,2,...,N的排列P1,P2...,Pn是Magic的,当且仅当2<=i<=N时,Pi> ...

  5. EasyPusher直播推送中用到的缓冲区设计和丢帧原理

    问题描述 我们在开发直播过程中,会需要用到直播推送端,推送端将直播的音视频数据推送到流媒体服务器或者cdn,再由流媒体服务器/CDN进行视频的转发和分发,提供给客户端进行观看.由于直播推送端会存在于各 ...

  6. mongodb的锁和高并发

    1 mongodb的锁 mongodb使用的读写锁. 2 mongodb高并发 同样是读写锁造成的问题. 3 findandmodify 该操作是原子的.

  7. Flow 的工作方式 类型检查

    Vue.js 技术揭秘 | Vue.js 技术揭秘 https://ustbhuangyi.github.io/vue-analysis/ Vue技术内幕 http://hcysun.me/vue-d ...

  8. 关于ActiveMQ接收端停止接收的方法

    现在有一个需求: 在发送端服务器出现故障后,接收端的接收方法要停下来,关于停止接收的方法,我做了下面这些事情: // 获取 ConnectionFactory ConnectionFactory co ...

  9. Jpa生成mysql注释，添加ODBC数据源导入数据到EA

    通过Jpa 注解生成表注释 实体类中使用如下注解,生成表字段注释: @Column(name = "userid", columnDefinition = "varcha ...

  10. Codeforces Round #178 (Div. 2) B. Shaass and Bookshelf —— DP

    题目链接:http://codeforces.com/contest/294/problem/B B. Shaass and Bookshelf time limit per test 1 secon ...