今天学习了 DOM 事件流三阶段

起了个小学生式标题。

这东西又是浏览器历史的一桩恩怨……当最初的 HTML 标记式的语言结构逐步成形后,人们开始对网页内的互动有了要求。当然,这事本来并不难,所有的用户互动归根结底就是『触发事件 – 判断当前状态 – 执行相应命令』的逻辑,而 HTML 本身就已经通过开标签和闭标签组对的形式,很好地形成了后来被称之为『DOM 元素』的数据结构,理论上只要把触发事件分别加到一个个的元素上,或者按需加到某些特定的元素上,就可以执行命令了。

然后问题就来了。

由于 HTML 的表现是盒式结构,都是一些大框框包含小框框的情况。比如如下代码:

形成的 DOM 盒式包含结构大约就是这样:

无命名

当用户点击红块时,实际上浏览器是无法判断这次点击的意图的,也就是说,到底应该是点在红块上,红块对这次点击作出反应,还是点在绿块上,亦或是蓝块上。即使是三者都算作被点到了,三者都有反应,那怎么也得有个先后顺序吧。

有两种顺序都可以,一种是先子后父,先里后外,红绿蓝顺序;第二种是先父后子,先外后里,蓝绿红顺序。

两者都可以,两者都有理,然后老 IE 用的是前者,老 Netscape 用的是后者……结的梁子够多了,也不差这一个了。

于是新的协议为了兼容,提出了 DOM 事件流的三个阶段的设计,即……首先,都别争了,顺序就按『蓝绿红绿蓝』这么来吧……然后,这一顺序又分成三个阶段,第一阶段我称之为『下沉』,顺序为蓝绿;第二阶段『触底』,系统发现红色已经是最底层 DOM 元素了,第三阶段『上浮』,顺序变成了红绿蓝。

这三个阶段是有标准的命名的,分别是『捕获阶段』、『目标阶段』、『冒泡阶段』。并且严格来说,捕获阶段不包括最底层元素,而冒泡阶段包括目标阶段。盗图一张:

001108_Ry8q_214423

尽管规范上来说,要求捕获阶段只注册事件,而在冒泡阶段执行相应阶段。但事实上各浏览器在实现时,都允许在捕获阶段也执行相应的事件。结果就是,对于一个目标,有两次执行事件的机会。这在为 DOM 元素添加事件的 JS 函数里就写得很明白:

其中第三参数就是决定这个事件是否在捕获阶段就开始执行的。

当我们使用 jQuery 等第三方库时,这一特性被 jQuery 很好地隐藏封装起来了,并良好地处理了各浏览器不一致的特性,使得我们可以通过 .click() 函数方便地添加点击事件,并不用考虑三个阶段的问题。

一条评论

  1. 李鹏说道:

    首页内容好长~~

发表评论

电子邮件地址不会被公开。 必填项已用*标注