javascrpit 事件捕获和事件冒泡_javascri事件处理是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/cvper/article/details/79855972

事件捕获和事件冒泡涉及到了事件的流程，我们先来看一个例子：

一、添加事件监听：给 window 添加点击的监听事件，输出 “别点了，受不了了“

 
   < 
  script 
  > 
 
  function 
    
  say 
  (){ 
 
  console 
  . 
  log 
  ( 
  "别点了，受不了了！" 
  ); 
 
   } 
 
   window. 
  addEventListener 
  ( 
  "click" 
  ,  
  say ，false 
  ); 
 
  < 
  / 
  script 
  >

二、上面我们已经知道如何添加监听，下面看一个例子，然后分析事件的流程：

事件流程的简单描述：

当我们给一个元素添加监听的时候，例如点击事件；

首先这个事件进入的是捕获阶段，也就是从外层向内层探索，例如下面的三个div嵌套的例子，

先找到到一个div，然后查看有没有绑定的事件，如果有，那么就执行相应的处理函数，如果

没有相应的事件或者事件执行完成，那么继续向里面的第二个div探索，如果第二个div有绑定

的事件，那么执行，如果没有，或者事件执行完成，继续向第三个div探索；

目标阶段，假设我们点击的是第三个div，那么到达这个div然后执行相应的处理就是我们本来

应该做的事情，也就是我们的目标；

冒泡阶段，假设我们的目标阶段执行完成，那么从第三个div依次到达第一个div，就是冒泡阶段，

这个阶段, 所做的事情就是和捕获阶段相反的，如图所示；

当然了，默认情况下，我们嵌套的三个div执行的是冒泡事件，当然了，我们也可以设置是表现为

捕获行为还是冒泡行为，下面通过代码实例来说明；

默认情况下是冒泡行为，我们先来看冒泡：

我们定义三个嵌套的div，然后分别给每个div设置 click 监听，分别弹出不同的内容；

效果图：

代码实现：

   <!DOCTYPE html> 
 

   < 
  html> 
 

   < 
  head> 
 
 
  < 
  meta 
  charset= 
  "utf-8" 
  > 
 
 
  < 
  meta 
  name= 
  "newbean" 
  /> 
 
 
  < 
  title 
  > 事件捕获和事件冒泡 
  </ 
  title 
  > 
 
 
  < 
  style 
    
  type 
  = 
  "text/css" 
  > 
 
 
    
  #a 
  { 
  width 
  : 
  400 
  px 
  ;  
  height 
  : 
  400 
  px 
  ;  
  background-color 
  : 
  #ccc 
  ;  
  padding 
  : 
  50 
  px 
  ;} 
 
 
    
  #b 
  { 
  width 
  : 
  200 
  px 
  ;  
  height 
  : 
  200 
  px 
  ;  
  background-color 
  :pink;  
  padding 
  : 
  50 
  px 
  ;} 
 
 
    
  #c 
  { 
  width 
  : 
  80 
  px 
  ;  
  height 
  : 
  80 
  px 
  ;  
  background-color 
  :greenyellow; 
  padding 
  : 
  50 
  px 
  ;} 
 
 
    
  < 
  / 
  style 
  > 
 

   </ 
  head> 
 

   < 
  body> 
 
 
  < 
  div 
  id= 
  "a" 
  >我是第一个 
 
 
  < 
  div 
  id= 
  "b" 
  >我是第二个 
 
 
  < 
  div 
  id= 
  "c" 
  > 
 

   我是第三个 
 
 
  </ 
  div 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  script 
  > 
    
 
 
    
  var 
    
  a 
  = 
  document. 
  getElementById 
  ( 
  "a" 
  ); 
 
 
    
  var 
    
  b 
  = 
  document. 
  getElementById 
  ( 
  "b" 
  ); 
 
 
    
  var 
    
  c 
  = 
  document. 
  getElementById 
  ( 
  "c" 
  ); 
 
 
    
  a 
  . 
  addEventListener 
  ( 
  "click" 
  , 
  function 
  (){ 
 
 
    
  alert 
  ( 
  "我是第一个" 
  ); 
 
 
   }); 
 
 
    
  b 
  . 
  addEventListener 
  ( 
  "click" 
  , 
  function 
  (){ 
 
 
    
  alert 
  ( 
  "我是第二个" 
  ); 
 
 
   }); 
 
 
    
  c 
  . 
  addEventListener 
  ( 
  "click" 
  , 
  function 
  (){ 
 
 
    
  alert 
  ( 
  "我是第三个" 
  ); 
 
 
   });  
 
 
    
  < 
  / 
  script 
  > 
 

   </ 
  body> 
 

   </ 
  html> 
 

结果：当我们点击第一个div时，弹出 “ 我是第一个 ”；

当我们点击第二个div时，先弹出“我是第二个”，再弹出“我是第一个”；

当我们点击第三个div时，先弹出 “我是第三个”，再弹出我是“第二个”，最后弹出“我是第一个”；

这个就是典型的时间冒泡；

我们再来看看捕获：

代码：

   <!DOCTYPE html> 
 

   < 
  html> 
 

   < 
  head> 
 
 
  < 
  meta 
  charset= 
  "utf-8" 
  > 
 
 
  < 
  meta 
  name= 
  "newbean" 
  /> 
 
 
  < 
  title 
  > 事件捕获和事件冒泡 
  </ 
  title 
  > 
 
 
  < 
  style 
    
  type 
  = 
  "text/css" 
  > 
 
 
    
  #a 
  { 
  width 
  : 
  400 
  px 
  ;  
  height 
  : 
  400 
  px 
  ;  
  background-color 
  : 
  #ccc 
  ;  
  padding 
  : 
  50 
  px 
  ;} 
 
 
    
  #b 
  { 
  width 
  : 
  200 
  px 
  ;  
  height 
  : 
  200 
  px 
  ;  
  background-color 
  :pink;  
  padding 
  : 
  50 
  px 
  ;} 
 
 
    
  #c 
  { 
  width 
  : 
  80 
  px 
  ;  
  height 
  : 
  80 
  px 
  ;  
  background-color 
  :greenyellow; 
  padding 
  : 
  50 
  px 
  ;} 
 
 
    
  < 
  / 
  style 
  > 
 

   </ 
  head> 
 

   < 
  body> 
 
 
  < 
  div 
  id= 
  "a" 
  >我是第一个 
 
 
  < 
  div 
  id= 
  "b" 
  >我是第二个 
 
 
  < 
  div 
  id= 
  "c" 
  > 
 

   我是第三个 
 
 
  </ 
  div 
  > 
 
 
  </ 
  div 
  > 
 
 
  </ 
  div 
  > 
 
 
  < 
  script 
  > 
    
 
 
    
  var 
    
  a 
  = 
  document. 
  getElementById 
  ( 
  "a" 
  ); 
 
 
    
  var 
    
  b 
  = 
  document. 
  getElementById 
  ( 
  "b" 
  ); 
 
 
    
  var 
    
  c 
  = 
  document. 
  getElementById 
  ( 
  "c" 
  ); 
 
 
    
  a 
  . 
  addEventListener 
  ( 
  "click" 
  , 
  function 
  (){ 
 
 
    
  alert 
  ( 
  "我是第一个" 
  ); 
 
 
   }, 
  true 
  ); 
 
 
    
  b 
  . 
  addEventListener 
  ( 
  "click" 
  , 
  function 
  (){ 
 
 
    
  alert 
  ( 
  "我是第二个" 
  ); 
 
 
   }, 
  true 
  ); 
 
 
    
  c 
  . 
  addEventListener 
  ( 
  "click" 
  , 
  function 
  (){ 
 
 
    
  alert 
  ( 
  "我是第三个" 
  ); 
 
 
   }, 
  true 
  );  
 
 
    
  < 
  / 
  script 
  > 
 

   </ 
  body> 
 

   </ 
  html> 
 