首頁 > 文章 > web前端 > 帶你快速理解javascript中的事件模型

帶你快速理解javascript中的事件模型

韦小宝原創: 2018-01-22 09:59:501582瀏覽

這篇文章主要介紹了javascript中的事件模型,其中包括了DOM0級事件模型和DOM2級事件模型（事件捕獲和事件冒泡和DOM2級的註冊事件和解除事件） ,對JavaScript的朋友可以參考下這篇文章

javascript中有兩種事件模型：DOM0，DOM2。而對於這兩種的時間模型，我一直不是非常的清楚，現在透過網路查閱資料終於明白了一些。

　　一. DOM0級事件模型

　　DOM0級事件模型是早期的事件模型，所有的瀏覽器都是支援的，而且其實作也是比較簡單。程式碼如下：

<p id = &#39;click&#39;>click me</p>
<script>
 document.getElementById(&#39;click&#39;).onclick = function(event){
  alert(event.target);
 }
</script>

　　這種事件模型就是直接在dom物件註冊事件名稱，這段程式碼就是在p標籤上註冊了一個onclick事件，在這個事件函數內部輸出點擊的目標。而解除事件則更加簡單，就是將null複製給事件函數，如下：

document.getElementById('click'_).onclick = null;
#　　由此我們可以知道dom0中，一個dom物件只能註冊一個同類型的函數，因為註冊多個同類型的函數的話，就會發生覆蓋，之前註冊的函數就會無效。

var click = document.getElementById(&#39;click&#39;);
click.onclick = function(){
 alert(&#39;you click the first function&#39;);
};
click.onclick = function(){
 alert(&#39;you click the second function&#39;)
}

　　在這段程式碼中，我們為dom物件註冊了兩個onclick函數，但是結果是只執行了第二個註冊的函數，前面所註冊的函數被覆蓋了。

　　二. DOM2級事件模型

1. 事件擷取與事件冒泡（capture,bubble)

　　首先，IE8及以下是不支援這種事件模型的。事件捕獲和事件冒泡的機制如下圖：

　　如上圖所示，123代表事件捕獲，4567代表事件冒泡。首先我們使用下面的程式碼：

<p id = &#39;outer&#39; style = &#39;margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;&#39;>
 <p id="inner" style = &#39;margin-left:20px; width: 50px;height:50px; background: green;&#39;></p>
</p>

　　假設我們點擊了ID為inner的p，那麼此時的事件流程就是，首先執行捕獲階段：document-html-body-p(outer) 。然後執行冒泡階段：p(inner)-p(outer)-body-html-document。

　2. DOM2級的註冊事件和解除事件

　　在DOM2級中使用addEventListener和removeEventListener來註冊和解除事件（IE8及之前版本不支援）。這種函數較之之前的方法好處是一個dom物件可以註冊多個相同類型的事件，不會發生事件的覆蓋，會依序的執行各個事件函數。

　　addEventListener('事件名稱','事件回呼','捕獲/冒泡')。範例如下：

<p id = &#39;outer&#39; style = &#39;margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;&#39;>
 <p id="inner" style = &#39;margin-left:20px; width: 50px;height:50px; background: green;&#39;></p>
</p>
<script>
 var click = document.getElementById(&#39;inner&#39;);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;click one&#39;);
 },false);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;click two&#39;);
 },false);
</script>

　　首先我們要知道addEventListenr的第一個參數是事件名稱，與DOM0級不同的是沒有」on“，另外第三個參數代表捕獲還是冒泡，true代表捕獲事件，false代表冒泡事件。

　　而在這段程式碼中，我們為inner的p註冊了兩個click事件函數，結果是瀏覽器會依序執行這兩個函數。

　　下面我們示範如何使用事件流的發生機制。

<p id = &#39;outer&#39; style = &#39;margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;&#39;>
 <p id="inner" style = &#39;margin-left:20px; width: 50px;height:50px; background: green;&#39;></p>
</p>
<script>
 var click = document.getElementById(&#39;inner&#39;);
 var clickouter = document.getElementById(&#39;outer&#39;);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;inner show&#39;);
 },true);
 clickouter.addEventListener(&#39;click&#39;,function(){
  alert(&#39;outer show&#39;);
 },true);
</script>

　　這段程式碼，我們使用了捕獲事件，由於inner是嵌套在outer中的，所以我們知道當使用捕獲的時候outer是應該首先捕獲到這個事件的，其次inner才能捕獲到這個事件。那麼結果就是outer先執行，其次是inner執行。

　　那麼我把outer的執行時機改為冒泡的階段呢？

alickouter.addEventListener(&#39;click&#39;,function(){
 alert(&#39;outer show&#39;); 
},false);

　　這種情況下，就是先執行inner後執行outer了。同理我們把二者的事件執行時機都改為冒泡階段的話，依舊是先執行inner後執行outer。那麼還有個問題，就是如果我們把inner註冊兩個click事件，一個是在捕獲階段，另一個是在冒泡階段，也就是說把addEventListenter的第三個參數分別設為false和true，那麼執行的順序又是怎樣的呢。

<script>
 var click = document.getElementById(&#39;inner&#39;);
 var clickouter = document.getElementById(&#39;outer&#39;);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;capture show&#39;);
 },true);
 click.addEventListener(&#39;click&#39;,function(){
  alert(&#39;bubble show&#39;);
 },false);
</script>

　　這種情況下首先這些的是capture show，其次是bubble show。但是這種結果是與註冊的順序有關係的，先註冊就先執行。因為我們在看事件捕捉和事件冒泡示意圖，發現最後具體的dom物件是只有一個的。

　　那麼如果我們給outer和inner都註冊了click事件但是我不希望outer執行怎麼辦呢？這時候我們就需要用到stopPropagation函數了，這個函數是用來阻止冒泡，言下之意是讓事件不再繼續冒泡下去，這樣接下來註冊同樣類型事件的dom物件就不會執行了。

例如在自製下拉框的時候，我們點擊瀏覽器的其他位置，我們需要下拉框的options隱藏，這時我們就要用到stopPropagation了。如下：

<script>
 var click = document.getElementById(&#39;inner&#39;);
 var clickouter = document.getElementById(&#39;outer&#39;);
 click.addEventListener(&#39;click&#39;,function(event){
  alert(&#39;inner show&#39;);
  event.stopPropagation();
 },false);
 clickouter.addEventListener(&#39;click&#39;,function(){
  alert(&#39;outer show&#39;);
 },false);
</script>

　　正常的情况下，我们在不添加stopPropagation函数时，首先应该执行inner，然后执行outer，但是当我们在inner的事件函数中添加了stopPropagation函数之后，执行完inner的事件函数之后，就不会在执行outer的事件函数了，也可以理解为事件冒泡到inner之后就消失了，因此也就不会在执行接下来的事件函数了。

　　由于事件捕获阶段没有可以阻止事件的函数，所以一般都是设置为事件冒泡。

帶你快速理解javascript中的事件模型

相關文章