JS中的事件冒泡与捕获

 
 
  
  
 
  
  
  var dom_out = document.getElementsByClassName('out')[0]; 
  
  
  var dom_in = document.getElementsByClassName('in')[0]; 
  
  
  dom_out.addEventListener('click',function(){ 
  
  
    alert('out'); 
  
  
  },true); 
  
  
  dom_in.addEventListener('click',function(){ 
  
  
    alert('in'); 
  
  
  },true); 
  
  
 
 

 
 
  
  
 
  
  
  s1 
  
  
    s2 
  
  
      s3 
  
  
       
  
  
     
  
  
   
  
  

这次我们设置三个 span，分别是 s1, s2, s3，然后设置 s1，s3 为冒泡执行，s2 为捕获执行：

 
 
  
  
 
  
  
  var s1 = document.getElementsByClassName('s1')[0]; 
  
  
  var s2 = document.getElementsByClassName('s2')[0]; 
  
  
  var s3 = document.getElementsByClassName('s3')[0]; 
  
  
  s1.addEventListener('click',function(){ 
  
  
    alert('s1'); 
  
  
  },false); 
  
  
  s2.addEventListener('click',function(){ 
  
  
    alert('s2'); 
  
  
  },true); 
  
  
  s3.addEventListener('click',function(){ 
  
  
    alert('s3'); 
  
  
  },false); 
  
  
 
 

从运行的效果来看，点击 s3，依次 alert s2 => s3 => s1，说明：

• 捕获事件和冒泡事件同时存在的，而且捕获事件先执行，冒泡事件后执行;
• 如果元素存在事件且事件的执行时间与当前逻辑一致(冒泡或捕获)，则执行。

默认事件取消与停止冒泡

当然，有时候我们只想执行最内层或最外层的事件，根据内外层关系来把范围更广的事件取消掉(对于新手来说，不取消冒泡，很容易中招的出现 bug)。event.stopPropagation()(IE 中window.event.cancelBubble = true)可以用来取消事件冒泡。

有时候对于浏览器的默认事件也需要取消，这时候用到的函数则是 event.preventDefault()(IE 中window.event.returnValue = false)。

那么默认事件取消和停止冒泡有什么区别呢?我的理解：浏览器的默认事件是指浏览器自己的事件(这不废话吗)，比如 a 标签 的点击，表单的提交等，取消掉就不会执行啦;冒泡则取消的是由外向里(捕获)、由里向外(冒泡)，stop 之后，就不会继续遍历了。stackoverflow 上的解答

看下例子，依旧是上面那个例子，不过每个函数都加了 停止冒泡：

 
 
  
  
s1.addEventListener('click',function(e){ 
  
  
  e.stopPropagation(); 
  
  
  alert('s1'); 
  
  
},false); 
  
  
s2.addEventListener('click',function(e){ 
  
  
  e.stopPropagation(); 
  
  
  alert('s2'); 
  
  
},true); 
  
  
s3.addEventListener('click',function(e){ 
  
  
  e.stopPropagation(); 
  
  
  alert('s3'); 
  
  
},false);  
 

点击的结果是：当点击 s2 或 s3 的时候，都会 alert s2，点击 s1，弹出 s1。因为事件被取消的缘故，点击 s3，执行 s2后就不会在向下执行了。

在看一个 preventDefault 的例子。

 
 
  
  
 
  
  
  点我回主页