好好学一遍JavaScript 笔记(八)——冒泡型事件、捕获型事件

时间 2021-01-02

标签 html java 浏览器 ide spa 设计 htm 对象事件栏目 JavaScript 繁體版

原文原文链接

冒泡型事件的基本思想是、事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。html

  
  
           
  
  
   
   
            
   
   <html>   
   
   
            
   
       <head>   
   
   
            
   
           <title></title>   
   
   
            
   
       </head>   
   
   
            
   
       <body onclick="theClick()">   
   
   
            
   
           <div onclick="theClick()">点击</div>   
   
   
            
   
       </body>   
   
   
            
   
   </html>

IE5.5冒泡顺序以下：java

(1)<div>浏览器

(2)<body>ide

(3)<document>spa

为何称做冒泡、由于事件按照DOM的层次结构像水泡同样不断上升。让我想起了一首歌："吹泡泡、吹泡泡、泡泡飞啊飞得高、飞到天空中、问声太阳好"。设计

IE6呢、稍微修改了冒泡型事件、这样<html>元素也能够接收冒泡的事件、仍是上面的代码。htm

IE6的冒泡顺序以下：对象

(1)<div>事件

(2)<body>ip

(3)<html>

(4)<document>

Mozilla1.0及更高版本也支持冒泡事件但到达了另外一层次。相似IE6.0，它也支持<html>元素级别的事件、不过，事件"起泡"一直上升到Windows窗口对象。继续前面的代码、点击<div>元素将形成下图所示的事件冒泡：

捕获型事件：

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

(1)document

(2)<div>

有些人也称之为自顶向下的事件模型，由于它是从DOM层次的顶端开始向下延伸的：

DOM事件流：

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

DOM标准的事件模型

咱们已经对上面两个不一样的事件模型进行了解释和对比。DOM标准同时支持两种事件模型，即捕获型事件与冒泡型事件，可是，捕获型事件先发生。两种事件流都会触发DOM中的全部对象，从document对象开始，也在document对象结束（大部分兼容标准的浏览器会继续将事件是捕捉/冒泡延续到 window对象）。继续使用前面的例子、在与DOM兼容的浏览器中点击<div>元素时、事件流的进行以下图：

注意由于事件的目标(<div>元素)是最精确的元素(因而，在DOM树中最深)，实际上它会接收两次事件，一次在捕获过程当中，另外一次在冒泡过程当中。DOM事件模型的最独特的性质是，文本节点也触发事件(在IE不会)。因此若是点击示例中的<div>点击</div>、实际的事件流应该是：

参考文档：《javaScript高级程序设计》