目錄

• 一、事件處理模型
• 1、事件冒泡
• （1）給三個div元素繫結事件
• （2）執行結果：
• 2、事件捕獲
• （1）給三個div元素繫結事件
• （2）執行結果：
• 二、阻止事件冒泡
• （1）w3c標準 event.stopPropagation();但ie9以下版本不支援
• （2）ie獨有：event.cancelBubble = RVLXwNtrue;
• （3）合併取消：return false
• 總結

一、事件處理模型

事件冒泡、捕獲：事件冒泡和事件捕獲分別由微軟和網景公司提出，這兩個概念都是為了解決頁面中事件流（事件發生順序）的問題。

<div id="d1">
        <div id="d2">
            www.cppcns.com
 
<div id="d3"></div>
        </div>
</div>

給出的具有巢狀關係的三個div，給三個元素註冊相同的事件時，它們的觸發順序時怎樣呢？

1、事件冒泡

微軟提出了名為事件冒泡的事件流。結構上（非視覺上）巢狀關係的元素，會存在冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）

針對上面的例子，如果用冒泡方式，觸發順序應該時：d3——>d2——>d1，那麼我們來驗證一下：

（1）給三個div元素繫結事件

//1.獲取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、繫結事件
d1.onc
 
lick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(){
      console.log(this.id)
   }

（2）執行結果：

單擊紅色區域:

單擊紫色區域：

單擊綠色區域：

以上就是事件冒泡啦！

2、事件捕獲

結構上（非視覺上）巢狀關係的元素，會存在事件捕獲的功能，即同一事件，自父元素捕獲至子元素（事件源元素）。（自頂向下）（ie沒有捕獲事件）

針對上面的例子，如果用冒泡方式，觸發順序應該時：d1——>d2——>d3，那麼我們來驗證一下：

（1）給三個div元素繫結事件

//1.獲取元素
var d1 = dochttp://www.cppcns.comument.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、繫結事件
d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(){
      console.log(this.id)
   }

（2）執行結果：

單擊紅色區域：

單擊紫色區域：

單擊綠色區域：

事件捕獲get!!!

注意：

• 觸發順序 ：先捕獲，後冒泡
• focus,blur,change,submit,reset,select等事件不冒泡

二、阻止事件冒泡

（1）w3c標準 event.stopPropagation();但ie9以下版本不支援

//1.獲取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、繫結事件
d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(e){
      e.stopPropagation();
      console.log(this.id)
   }

會發現單擊綠色區域時，沒有依次觸發外部的事件，事件冒泡被阻止：

（2）ie獨有：event.cancelBubble = true;

//1.獲取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、繫結事件
d1.onclick = function(){
     console.log(this.id)
  }
d2.onclick = function(){
      console.log(this.id)
  }
d3.onclick = function(e){
      e.cancelBubble = true;
      console.log(this.id)
   }

結果同（1）。

（3）合併取消：return false

在的return false只會阻止預設行為，而是用的話則既阻止預設行為又防止物件冒泡。

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注我們的更多內容!