转自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. asp.net core 初探 二

    今天用@宇内流云大大的jexus 体验一下生产环境的发布,运行. 生产环境: centos 7 jexus 5.8.1 独立版 包含了mono (mono安装真心痛苦……) 开发环境就是昨天的Ubun ...

  2. 制作一个塔防游戏 Cocos2d-x 2.1.4 （一）

    在这篇文章,将会学习到怎样制作一个塔防游戏.在这其中,学习怎样在设定的时间内出现一波波的敌人,使这些敌人沿着指定的路点前进.怎样在地图上指定的位置创建炮塔.怎样使炮塔射击敌人,怎样可视化调试路点和炮塔 ...

  3. extjs中新建窗体时，给窗体添加背景图片不显示问题之一

    1.在extjs中新建窗体时,给窗体添加背景图片不显示,例如下面的代码. 不显示的原因:因为设置了  layout: 'fit', Ext.create('Ext.Window', { title: ...

  4. BitMapFactory.decodeFile 总是返回NULL的原因之一

    之前碰到过,顺便记录下来,如果出现这种情况,首先看看是否有对这个文件的读权限.

  5. (转)定制findbugs规则

    转载自http://www.51testing.com/html/97/13997-211893.html 这类文章极少,字节码操作需要对becl库及jvm字节码操作有一定常识.参考: http:// ...

  6. LR-虚拟用户以进程和线程模式运行的区别

    进程方式和线程方式的优缺点: 如果选择按照进程方式运行, 每个用户都将启动一个mmdrv进程,多个mmdrv进程会占用大量内存及其他系统资源,这就限制了可以在任一负载生成器上运行的并发用户数的数量,因 ...

  7. Mongodb GridFS——适合大小超过16MB的文件

    一.概述 GridFS是基于mongodb存储引擎是实现的“分布式文件系统”,底层基于mongodb存储机制,和其他本地文件系统相比,它具备大数据存储的多个优点.GridFS适合存储超过16MB的大型 ...

  8. plsql导入csv数据,未响应,invalid identifier

    问题分析: 1.确保cvs字段名与表字段名一致,不要有空格 2.cvs字段对应表字段的大写,确保表字段都是大写 3.如果字段能对应上,plsql会自动识别出来

  9. emacs设置tab缩进

    这两天使用Emacs自带的JavaScriptMode时,发现与其它编辑器下缩进不同,而且用emacs重新缩进对齐后,再用其它的编辑器打时缩进却乱掉了.分析应该是Tab缩进的问题,在.emacs中增加 ...

  10. BZOJ_2850_巧克力王国_KDTree

    BZOJ_2850_巧克力王国_KDTree Description 巧克力王国里的巧克力都是由牛奶和可可做成的.但是并不是每一块巧克力都受王国人民的欢迎,因为大家都不喜 欢过于甜的巧克力.对于每一块 ...