js中冒泡事件和捕獲事件

標籤：style   blog   http   color   java   使用   io   2014   

js中冒泡事件和捕獲事件：

冒泡事件：冒泡事件是從裡向外，即是從被繫結元素開始一直向外到達頁面的所有祖先元素都會被觸發，這 一過程被稱為事件冒泡。這個事件從原始元素開始一直冒泡到DOM樹的最上層

捕獲事件：捕獲事件是從頁面的最上層到被繫結元素都會觸發。

IE只支援事件冒泡，不支援事件捕獲

冒泡事件和捕獲事件的方向是相反的。

形式如所示：

 

一般為瀏覽器中的元素繫結事件有2種方式：

一、直接在頁面元素中進行綁定，此方式採用的是冒泡排序，如：

<div id="eventExample" onclick="alert(‘直接在元素上綁定事件‘)"></div>

二、通過js的方式為元素繫結事件，如：

var eventObj = document.getElementById("eventExample");//IE瀏覽器中使用的是elem.attachEvent("onclick",function(){});eventObj.attachEvent("onclick",function(){});//在其他瀏覽器中使用elem.addEventListener("click",function(){},boolean是否使用捕獲方式)eventObj.addEventListener("click",function(){},false);

 

addEventListener(事件類型，觸發的函數，是否捕獲)：如果最後一個參數為true，則表示採用捕獲事件；如果最後一個參數是false，則表示採用冒泡事件。

<div id="event_1" onclick="alert(‘最上層‘)">    <span id="event_2" onclick="alert(‘中介層‘)">        <a id="event_3" href="http://www.baidu.com" onclick="alert(‘最後一層‘)" >最後一層</a>    </span>        </div><script>var event_3 = document.getElementById("event_3");event_3.addEventListener("click",function(){    alert("通過綁定點擊了最後一層");},false);</script>

 

在執行上述代碼的過程中，如果點擊“最後一層”，首先會彈出“最後一層”，然後彈出“通過綁定點擊了最後一層”，然後彈出“中介層”，最後是“最上層”，

由這個執行順序可以看出，冒泡事件是由內之外執行的，且在執行過程中，直接綁定在元素上的事件比通過js綁定的時間執行的優先順序高。

 

說到冒泡事件，就會涉及到組織冒泡：

1.event.stopPropagation();

<div id="event_1" onclick="alert(‘最上層‘)">    <span id="event_2" onclick="alert(‘中介層‘)">        <a id="event_3" href="http://www.baidu.com" onclick="alert(‘最後一層‘)" >最後一層</a>    </span>        </div><script>var event_3 = document.getElementById("event_3");event_3.addEventListener("click",function(event){    event.stopPropagation();},false);</script>

在代碼綁定中加入event.stopPropagation();後，執行的結果為：彈出”最後一層“，然後跳轉到”百度“。

2.event.preventDefault(); 阻止元素的預設事件的執行

如果將上述代碼中的event.stopPropagation();換成event.preventDefault();,執行結果就變成：”最後一層“---->”中介層“----->"最上層"，然後就不會跳轉到”百度“

3.return false;

 

/**************************附加知識*********************************/

1、event事件:

function showMsg(event){  event = event || window.event;  //IE和Chrome下是window.event FF下是e }

2、取消事件預設行為的方法：

function preventDefaultHandler(event){  event = event || window.event;  if(event.preventDefault){     event.preventDefault();           }else{     event.returnValue=false;//IE下使用          }}

3、阻止冒泡事件

function stopPropagationHandler(event){  event = event || window.event;  if(event.stopPropagation){    event.stopPropagation();      }else{     event.cancelBubble = true;//IE      }      }

4.擷取事件來源 

function eventSrc(event){  event = event || window.event;  var target = event.target || event.srcElement;//IE和Chrome下是srcElement FF下是target     }

5、如果你有一個很多行的大表格，在每個<tr>上綁定點擊事件是個非常危險的想法，因為效能是個大問題。流行的做法是使用事件委託。 

事件委託描述的是將事件綁定在容器元素上，然後通過判斷點擊的target子項目的類型來觸發相應的事件。 
事件委託依賴於事件冒泡，如果事件冒泡到table之前被禁用的話，那以下代碼就無法工作了。 

myTable.onclick = function () {  e = e || window.event;  var targetNode = e.target || e.srcElement;  // 測試如果點擊的是TR就觸發  if (targetNode.nodeName.toLowerCase() === ‘tr‘) {   alert(‘You clicked a table row!‘);  } }