转自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. 阿里云nginx+thinkphp环境运行会直接下载php文件的问题。

    测试了好久,在网上查了各种nginx.conf的虚拟机配置都没用 其实最简单的方法就是在php.ini中找到 #cgi.fix_pathinfo=1; 去掉前面的#,如果值不是1则改为1

  2. android arcmenu

    http://www.kankanews.com/ICkengine/archives/129193.shtml

  3. C# WPF DataGrid控件实现三级联动

    利用DataGrid控件实现联动的功能,在数据库客户软件中是随处可见的,然而网上的资料却是少之又少,令人崩溃. 本篇博文将介绍利用DataGrid控件模板定义的三个ComboBox实现“省.市.区”的 ...

  4. 【计蒜客2017NOIP模拟赛1】

    D1T1 题面 题解:一开始以为傻题,旋转个坐标系就行了,结果光荣爆零~ 结果发现旋转坐标系后,由于多了一些虚点,锤子砸到虚点上了~gg [没有代码] D1T2 题面 题解:计算出每个边对答案的贡献即 ...

  5. EasyDarwin开源流媒体服务器gettimeofday性能优化（3000万/秒次优化至8000万次/秒）

    -本文由EasyDarwin开源团队成员贡献 一.问题描述 Easydarwin中大量使用gettimeofday来获取系统时间,对系统性能造成了一定的影响.我们来做个测试: While(1) { G ...

  6. [RK3288][Android6.0] 调试笔记 --- 软硬键盘同时使用【转】

    本文转载自:http://blog.csdn.net/kris_fei/article/details/78748313 Platform: RK3288 OS: Android 6.0 Kernel ...

  7. HDU2829 Lawrence —— 斜率优化DP

    题目链接:https://vjudge.net/problem/HDU-2829 Lawrence Time Limit: 2000/1000 MS (Java/Others)    Memory L ...

  8. 人生苦短之Python的urllib urllib2 requests

    在Python中涉及到URL请求相关的操作涉及到模块有urllib,urllib2,requests,其中urllib和urllib2是Python自带的HTTP访问标准库,requsets是第三方库 ...

  9. WebDriver API——javascript的相关操作

    有些时候webdriver是没法操作元素或浏览器的,这时候我们可以通过javascript来进行相关的操作,昨天在群里一个朋友定位一个显示框,总是无法定位点击,或者是点击无效,这个时候就可以用java ...

  10. CAS无锁机制原理

    原子类 java.util.concurrent.atomic包:原子类的小工具包,支持在单个变量上解除锁的线程安全编程 原子变量类相当于一种泛化的 volatile 变量,能够支持原子的和有条件的读 ...