理解JavaScript的事件冒泡

  

  <
  html 
  xmlns
  ="http://www.w3.org/1999/xhtml"
   lang
  ="zh"
   xml:lang
  ="zh"
  >
  

  <
  head
  >
  

  <
  meta 
  http-equiv
  ="Content-Type"
   content
  ="text/html; charset=UTF-8"
   
  />
  

  <
  meta 
  name
  ="developer"
   content
  ="Realazy"
   
  />
  

  <
  title
  >
  Bubble in JavaScript DOM
  
  

  <
  style 
  type
  ="text/css"
   media
  ="screen"
  >
  
  div * 
  {
  display
  :
  block
  ;
   margin
  :
  4px
  ;
   padding
  :
  4px
  ;
   border
  :
  1px solid white
  ;
  }
  
  textarea 
  {
  width
  :
  20em
  ;
   height
  :
  2em
  ;
  }
  

  
  

  <
  script 
  type
  ="text/javascript"
  >
  
     
  //
  
  

  
  

  
  

  <
  body
  >
  

  <
  h1
  >
  Bubble in JavaScript DOM
  
  

  <
  p
  >
  DOM树的结构是：
  
  

  <
  pre
  ><
  code
  >
  
 UL
   - LI
      - A
    - SPAN

  
  

  <
  div
  >
  
  
  <
  ul
  >
  
   
  <
  li
  ><
  a 
  href
  ="#"
  ><
  span
  >
  Bubbllllllllllllllle
  
  
   
  <
  li
  ><
  a 
  href
  ="#"
  ><
  span
  >
  Bubbllllllllllllllle
  
  
  
  
  

  
  

  <
  textarea
  >
  

  <
  p
  >
  鼠标进入UL的任何一个子元素，如果不停止冒泡，我们从UL到SPAN都定义了鼠标悬停（
  <
  code
  >
  mouseover
  
  ）事件，这个事件会上升了UL，从而从鼠标所进入的元素到UL元素都会有红色的边。
  
  

  <
  div
  >
  
  
  <
  ul
  >
  
   
  <
  li
  ><
  a 
  href
  ="#"
  ><
  span
  >
  Bubbllllllllllllllle
  
  
   
  <
  li
  ><
  a 
  href
  ="#"
  ><
  span
  >
  Bubbllllllllllllllle
  
  
  
  
  

  
  

  <
  p
  >
  如果停止冒泡，事件不会上升，我们就可以获取精确的鼠标进入元素。