转自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. mongodb查看连接数、同步时间、oplog及修改表名的操作

    1) mongodb查看连接数: db.serverStatus().connections; 2) mongodb查看同步时间: db.printSlaveReplicationInfo();  % ...

  2. java 的PO、VO、TO、BO、DAO、POJO解释（转载）

    PO(persistent object):持久化对象 在O/R映射时出现的概念.如果没有O/R映射,则不存在PO.通常对应数据模型(数据库),本身还有部分业务逻辑的处理.可以看作是与数据库中的表相映 ...

  3. LeetCode(125)题解--Valid Palindrome

    https://leetcode.com/problems/valid-palindrome/ 题目: Given a string, determine if it is a palindrome, ...

  4. EasyPusher RTSP直播之RTP数据包格式解析

    -本篇由团队成员Fantasy供稿! RTP包头格式 码流总体结构 h264的功能分为两层,视频编码层(VCL)和网络提取层(NAL).H.264 的编码视频序列包括一系列的NAL 单元,每个NAL ...

  5. DNS常见攻击与防范

    DNS常见攻击与防范 转自:http://www.williamlong.info/archives/3813.html 日期:2015-7-10 随着网络的逐步普及,网络安全已成为INTERNET路 ...

  6. zookeeper+dubbo【转载】

    转载地址:http://ahua186186.iteye.com/blog/1912421 注:zookeeper集群是myid文件是没有后缀名的. 转自: http://www.verydemo.c ...

  7. HackerRank leonardo-and-lucky-numbers —— 模线性方程的通解

    题目链接:https://vjudge.net/problem/HackerRank-leonardo-and-lucky-numbers 题解: 1.根据扩展欧几里得:7*x + 4*y = gcd ...

  8. tableView滑动时cell消失

    最近做的工程中,出现个奇怪的问题吗,就是上下滑动tableView的时候,cell还未出屏幕就消失了,找了很久找到了原因,是因为界面中需要的cell有很多种,而有的cell的高度是一开始算出来或是固定 ...

  9. ROM的分类

    转载自:http://www.ic37.com/htm_tech/2012-5/82774_23811.htm ROM(只读存储器)按其内容写入方式,一般分为3种:固定内容ROM:可一次编程PROM: ...

  10. SDOI2017 Round1 Day1 题解

    不知道有几个AK的,除了出题人SB搬了个BZOJ3779以外,应该没什么因素阻碍AK吧.要是SCOI考这套题多好. BZOJ4816 数字表格 SB反演,推出答案为$\prod_{i=1}^nf^{\ ...