事件冒泡及捕捉

IE5.5

IE5.5

IE6.0


IE6.0
Mozilal

事件捕捉:

IE使用冒泡型事件、相对的、Netscape使用了另一种称为捕获型事件(eventcapturing)的解决方案、事件的捕获和冒泡刚好相反的两种过程——捕获型事件中、事件从最不精确的对象(document对象)开始触发、然后到最精确(也可以在窗口级别捕获事件,不过必寻由开发人员特别指定)。Netscape不会将页面上的很多元素暴露给事件。继续使用前面的代码示例、事件按照下面的路径传播:

(1)document

(2) 《div》

有些人也称之为自顶向下的事件模型,因为它是从DOM层次的顶端开始向下延伸的:

事件捕捉

DOM事件流:

DOM(文档对象模型)结构是一个树型结构,当一个HTML元素产生一个事件时,该事件会在元素结点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件,这个传播过程可称为DOM事件流。事件顺序有两种类型:事件捕捉和事件冒泡。

DOM标准的事件模型

我们已经对上面两个不同的事件模型进行了解释和对比。DOM标准同时支持两种事件模型,即捕获型事件与冒泡型事件,但是,捕获型事件先发生。两种事件流都会触发DOM中的所有对象,从document对象开始,也在document对象结束(大部分兼容标准的浏览器会继续将事件是捕捉/冒泡延续到window对象)。继续使用前面的例子、在与DOM兼容的浏览器中点击

元素时、事件流的进行如下图:

捕获事件&&冒泡事件

注意因为事件的目标(元素)是最精确的元素(于是,在DOM树中最深),实际上它会接收两次事件,一次在捕获过程中,另一次在冒泡过程中。DOM事件模型的最独特的性质是,文本节点也触发事件(在IE不会)。所以如果点击示例中的点击、实际的事件流应该是:

捕获事件&&冒泡事件
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 8,193评论 1 10
  • JavaScript 程序采用了异步事件驱动编程模型。在这种程序设计风格下,当文档、浏览器、元素或与之相关的对象发...
    劼哥stone阅读 5,031评论 3 11
  • 嘛,总的来说呢:冒泡型事件的基本思想是、事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺...
    bug体质阅读 3,911评论 6 1
  • 一份工作除了能养活人还有一个美好期待在里面,最美不过。 青歌除了熟悉和整理图书,就是在A011的附近转来转去。他自...
    君子包阅读 1,693评论 2 5
  • 什么时候家变成一座冰冷的城?或许它从开始就是吧,只是起初拥有那燃烧的心与那热血,才会觉得温暖如春吧,而今心...
    恋雪的云阅读 1,261评论 0 0

友情链接更多精彩内容