javascript事件冒泡和事件捕獲型別

antzone發表於2017-04-03
JavaScript事件型別

js與HTML之間的互動是通過事件實現。

事件流:

事件是文件或瀏覽器視窗中發生的一些特定的互動瞬間。

事件流，描述的是頁面中接受事件的順序。

IE9，chrome，Firefox，Opera，Safari實現DOM2級規範中定義的標準DOM事件，IE8和IE8以下版本仍然保留專有的事件處理方式。

（1）.事件冒泡:

事件冒泡是由IE開發團隊提出來的，即事件開始時由最具體的元素（文件中巢狀層次最深的那個節點）接收，然後逐級向上傳播。

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<style type="text/css">
#myDiv{
  width:100px;
  height:100px;
  background-color:#FF0000;
}
</style>
<body>
<div id="myDiv"></div>
</body>
</html>

當使用者點選<div>元素，click事件將按照<div>—><body>—><html>—>document的順序進行傳播。

若在<div>和<body>上都定義了click事件，如下 :

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<style type="text/css">
#myDiv{
  width:100px;
  height:100px;
  background-color:#FF0000;
}
</style>
<script type="text/javascript">   
window.onload=function(){
  var div=document.getElementById("myDiv");
  div.onclick=function(event){
    alert("div");
  };
  document.body.onclick=function(event){
    alert("body");
  };
} 
</script>
<body>
<div id="myDiv"></div>
</body>
</html>

點選<div>，將先輸出“div”，再輸出“body”。

IE9，chrome，Firefox，Opera，Safari都支援事件冒泡，並將事件冒泡到window物件。

（2）.事件捕獲:

事件捕獲是由Netscape Communicator團隊提出來的，是先由最上一級的節點先接收事件，然後向下傳播到具體的節點。

當使用者點選了<div>元素，採用事件捕獲，則click事件將按照document—><html>—><body>—><div>的順序進行傳播。

若在<div>和<body>上都定義了click事件，如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<style type="text/css">
#myDiv{
  width:100px;
  height:100px;
  background-color:#FF0000;
}
</style>
<script type="text/javascript">   
window.onload=function(){
  var div=document.getElementById("myDiv");    
  div.addEventListener("click",function(event){
    alert("div");
  },true);
  document.body.addEventListener("click",function(event){
    alert("body");
  },true);
} 
</script>
<body>
<div id="myDiv"></div>
</body>
</html>

點選<div>，將先輸出“body”，再輸出“div”。

IE9，chrome，Firefox，Opera，Safari都支援事件捕獲，但是IE8和IE8以下的版本只支援事件冒泡。

儘管DOM2規範要求事件應該從document物件開始傳播，但是現在的瀏覽器實現都是從window物件開始捕獲事件。

（3）.DOM事件流:

"DOM2級事件”規定的事件流包含三個階段：事件捕獲階段，處於目標階段和事件冒泡階段。首先發生的是事件捕獲，然後是實際的目標接收到事件，最後階段是冒泡階段。以上面的HTML頁面為例，單擊<div>元素將按照下圖觸發事件:

a:3:{s:3:\"pic\";s:43:\"portal/201704/03/235403fffu6k9spge9r9ed.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

若在<div>和<body>上都定義了click事件，如下:

[JavaScript] 純文字檢視 複製程式碼
var div=document.getElementById("myDiv");    
div.onclick=function(event){
  alert("div");
};
document.body.addEventListener("click",function(event){
  alert("event bubble");
},false);
document.body.addEventListener("click",function(event){
  alert("event catch");
},true);

點選<div>，將先輸出“event catch”，再輸出“div”，最後輸出“event bubble”。

相關文章