博客专区 > Seven_7的博客 > 博客详情
理解DOM中的事件流
Seven_7 发表于2年前
理解DOM中的事件流
  • 发表于 2年前
  • 阅读 5470
  • 收藏 186
  • 点赞 15
  • 评论 15

聚焦虚拟化和OpenStack、容器、大数据等开源技术的年度大趴!>>> »  

摘要: 理解DOM中的事件流

    当浏览器发展到第四代时(IE4和Netscape Communicator 4),浏览器团队遇到一个很有意思的问题:页面的哪一部分会拥有特定的事件?想象下在一张纸上有一组同心圆,如果你把手指放在圆心上,那么你的手指指向的不是一个圆,而是一组圆。两家公司的开发团队在看待浏览器事件方面还是一致的。如果你单击了某个按钮,那么同时你也单击了按钮的容器元素,甚至整个页面。

    事件流描述的是从页面中接受事件的顺序。但有意思的是,IE和Netscape开发团队居然提出了两个截然相反的事件流概念。IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流。

事件冒泡

    IE的事件流叫做事件冒泡,即事件开始时由最具体的元素接受,然后逐级向上传播到较为不具体的节点。看下面的例子

点击按钮,那么这个click事件会按照这样传播:

  1. <input>

  2. <div>

  3. <body>

  4. <html>

  5. document

    所有现代浏览器都支持事件冒泡,但在具体实现上有一些差别。IE5.5及更早版本中的事件冒泡会跳过<html>元素(从<body>直接跳到document)。IE9、Firefox、Chrome和Safari则将事件一直冒泡到window对象。

事件捕获

    Netscape团队提出的另一种事件流叫做事件捕获。事件捕获的思想是不太具体的DOM节点应该更早接收到事件,而最具体的节点应该最后接收到事件。

针对上面同样的例子,点击按钮,那么此时click事件会按照这样传播:

  1. document

  2. <html>

  3. <body>

  4. <div>

  5. <input>

    虽然事件捕获是Netscape唯一支持的事件流模型,但IE9、Safari、Chrome、Opera和Firefox目前也都支持这种事件流模型。但由于老版本的浏览器不支持,因此很少有人使用事件捕获。

DOM事件流

    "DOM2级事件"规定的事件流包括三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段。首先发生的事件捕获,为截获事件提供机会。然后是实际的目标接受事件。最后一个阶段是时间冒泡阶段,可以在这个阶段对事件做出响应。以前面的例子,则会按下图顺序触发事件。

    在DOM事件流中,事件的目标在捕获阶段不会接受到事件。这意味着在捕获阶段,事件从document到div后就定停止了。下一个阶段是处于目标阶段,于是事件在input上发生,并在事件处理中被看成冒泡阶段的一部分。然后,冒泡阶段发生,事件又传播回document。  

    多数支持DOM事件流的浏览器都实现了一种特定的行为;即使“DOM2级事件”规范明确要求捕获阶段不会涉及事件目标,但IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果,就是有两个机会在目标对象上操作事件。  看如下例子。

这个Demo的结果,应该很清楚了吧。





共有 人打赏支持
粉丝 6
博文 22
码字总数 12645
评论 (15)
娱乐你我
很好的文章。赞。
肖雨
script的代码顺序执行的。实测click绑定的方法会按在script中定义的先后顺序只执行,没有像你说的dom事件流执行
noonoo

引用来自“hvhvhwhw_xd”的评论

script的代码顺序执行的。实测click绑定的方法会按在script中定义的先后顺序只执行,没有像你说的dom事件流执行

博主没错,你百度下第三个参数的意思
九月
呵呵 博主您有点搞笑


事件冒泡 事件捕获 DOM事件流 都应该归类到 DOM事件模型

这与JavaScript无关JavaScript是一种实现而已
袁国涛
代码怎么是图片?
雨翔河
博主代码怎么是图片。。。
哭你吃完
严重涨姿势!感谢bo主
喻恒春

引用来自“九月”的评论

呵呵 博主您有点搞笑


事件冒泡 事件捕获 DOM事件流 都应该归类到 DOM事件模型

这与JavaScript无关JavaScript是一种实现而已
确实, 名称用 DOM 事件流更合适, 阮一峰有一篇文章. http://javascript.ruanyifeng.com/dom/event.html w3 DOM-Level-3-Events 有张标准图 http://www.w3.org/TR/DOM-Level-3-Events/#event-flow
隐形人
JS权威教程第二版 里面讲得很详细啊
ph1982
涨见识了,讲的很清楚,感谢楼主!
good-good
https://itunes.apple.com/cn/app/websta-html-css-javascript/id908054939?mt=8
Seven_7

引用来自“九月”的评论

呵呵 博主您有点搞笑


事件冒泡 事件捕获 DOM事件流 都应该归类到 DOM事件模型

这与JavaScript无关JavaScript是一种实现而已
JavaScript包括ECMAScript、DOM、BOM,不过确实叫做DOM事件模型更合适。
肖雨

引用来自“noonoo”的评论

引用来自“hvhvhwhw_xd”的评论

script的代码顺序执行的。实测click绑定的方法会按在script中定义的先后顺序只执行,没有像你说的dom事件流执行

博主没错,你百度下第三个参数的意思
dom事件是先执行捕获阶段后执行冒泡阶段,但是这是实例是2个dom事件,所以根本不能看出来什么信息
陈祖煌
标题取得有点。。。。这与JavaScript无关,JavaScript是一种实现而已
陈祖煌
不过内容还是赞
×
Seven_7
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: