這篇文章主要介紹了javascript中的事件模型,其中包括了DOM0級事件模型和DOM2級事件模型(事件捕獲和事件冒泡和DOM2級的註冊事件和解除事件) ,對JavaScript的朋友可以參考下這篇文章
javascript中有兩種事件模型:DOM0,DOM2。而對於這兩種的時間模型,我一直不是非常的清楚,現在透過網路查閱資料終於明白了一些。
一. DOM0級事件模型
DOM0級事件模型是早期的事件模型,所有的瀏覽器都是支援的,而且其實作也是比較簡單。程式碼如下:
<p id = 'click'>click me</p> <script> document.getElementById('click').onclick = function(event){ alert(event.target); } </script>
這種事件模型就是直接在dom物件註冊事件名稱,這段程式碼就是在p標籤上註冊了一個onclick事件,在這個事件函數內部輸出點擊的目標。而解除事件則更加簡單,就是將null複製給事件函數,如下:
document.getElementById('click'_).onclick = null;
# 由此我們可以知道dom0中,一個dom物件只能註冊一個同類型的函數,因為註冊多個同類型的函數的話,就會發生覆蓋,之前註冊的函數就會無效。
var click = document.getElementById('click'); click.onclick = function(){ alert('you click the first function'); }; click.onclick = function(){ alert('you click the second function') }
在這段程式碼中,我們為dom物件註冊了兩個onclick函數,但是結果是只執行了第二個註冊的函數,前面所註冊的函數被覆蓋了。
二. DOM2級事件模型
##1. 事件擷取與事件冒泡(capture,bubble)
首先,IE8及以下是不支援這種事件模型的。事件捕獲和事件冒泡的機制如下圖: 如上圖所示,123代表事件捕獲,4567代表事件冒泡。首先我們使用下面的程式碼:<p id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'> <p id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></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 = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'> <p id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></p> </p> <script> var click = document.getElementById('inner'); click.addEventListener('click',function(){ alert('click one'); },false); click.addEventListener('click',function(){ alert('click two'); },false); </script>首先我們要知道addEventListenr的第一個參數是事件名稱,與DOM0級不同的是沒有」on“,另外第三個參數代表捕獲還是冒泡,true代表捕獲事件,false代表冒泡事件。 而在這段程式碼中,我們為inner的p註冊了兩個click事件函數,結果是瀏覽器會依序執行這兩個函數。
下面我們示範如何使用事件流的發生機制。
<p id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'> <p id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></p> </p> <script> var click = document.getElementById('inner'); var clickouter = document.getElementById('outer'); click.addEventListener('click',function(){ alert('inner show'); },true); clickouter.addEventListener('click',function(){ alert('outer show'); },true); </script>這段程式碼,我們使用了捕獲事件,由於inner是嵌套在outer中的,所以我們知道當使用捕獲的時候outer是應該首先捕獲到這個事件的,其次inner才能捕獲到這個事件。那麼結果就是outer先執行,其次是inner執行。
alickouter.addEventListener('click',function(){ alert('outer show'); },false);這種情況下,就是先執行inner後執行outer了。同理我們把二者的事件執行時機都改為冒泡階段的話,依舊是先執行inner後執行outer。那麼還有個問題,就是如果我們把inner註冊兩個click事件,一個是在捕獲階段,另一個是在冒泡階段,也就是說把addEventListenter的第三個參數分別設為false和true,那麼執行的順序又是怎樣的呢。
<script> var click = document.getElementById('inner'); var clickouter = document.getElementById('outer'); click.addEventListener('click',function(){ alert('capture show'); },true); click.addEventListener('click',function(){ alert('bubble show'); },false); </script>這種情況下首先這些的是capture show,其次是bubble show。但是這種結果是與註冊的順序有關係的,先註冊就先執行。因為我們在看事件捕捉和事件冒泡示意圖,發現最後具體的dom物件是只有一個的。
<script> var click = document.getElementById('inner'); var clickouter = document.getElementById('outer'); click.addEventListener('click',function(event){ alert('inner show'); event.stopPropagation(); },false); clickouter.addEventListener('click',function(){ alert('outer show'); },false); </script>
正常的情况下,我们在不添加stopPropagation函数时,首先应该执行inner,然后执行outer,但是当我们在inner的事件函数中添加了stopPropagation函数之后,执行完inner的事件函数之后,就不会在执行outer的事件函数了,也可以理解为事件冒泡到inner之后就消失了,因此也就不会在执行接下来的事件函数了。
由于事件捕获阶段没有可以阻止事件的函数,所以一般都是设置为事件冒泡。
相关推荐:
以上是帶你快速理解javascript中的事件模型的詳細內容。更多資訊請關注PHP中文網其他相關文章!