您好,登錄后才能下訂單哦!
javascript中有兩種事件模型:DOM0,DOM2。而對(duì)于這兩種的時(shí)間模型,我一直不是非常的清楚,現(xiàn)在通過(guò)網(wǎng)上查閱資料終于明白了一些。
一. DOM0級(jí)事件模型
DOM0級(jí)事件模型是早期的事件模型,所有的瀏覽器都是支持的,而且其實(shí)現(xiàn)也是比較簡(jiǎn)單。代碼如下:
<p id = 'click'>click me</p> <script> document.getElementById('click').onclick = function(event){ alert(event.target); } </script>
這種事件模型就是直接在dom對(duì)象上注冊(cè)事件名稱(chēng),這段代碼就是在p標(biāo)簽上注冊(cè)了一個(gè)onclick事件,在這個(gè)事件函數(shù)內(nèi)部輸出點(diǎn)擊的目標(biāo)。而解除事件則更加簡(jiǎn)單,就是將null復(fù)制給事件函數(shù),如下:
document.getElementById('click'_).onclick = null;
由此我們可以知道dom0中,一個(gè)dom對(duì)象只能注冊(cè)一個(gè)同類(lèi)型的函數(shù),因?yàn)樽?cè)多個(gè)同類(lèi)型的函數(shù)的話,就會(huì)發(fā)生覆蓋,之前注冊(cè)的函數(shù)就會(huì)無(wú)效。
var click = document.getElementById('click'); click.onclick = function(){ alert('you click the first function'); }; click.onclick = function(){ alert('you click the second function') }
在這段代碼中,我們?yōu)閐om對(duì)象注冊(cè)了兩個(gè)onclick函數(shù),但是結(jié)果是只執(zhí)行了第二個(gè)注冊(cè)的函數(shù),前面所注冊(cè)的函數(shù)被覆蓋了。
二. DOM2級(jí)事件模型
1. 事件捕獲和事件冒泡(capture,bubble)
首先,IE8及以下是不支持這種事件模型的。事件捕獲和事件冒泡的機(jī)制如下圖:
如上圖所示,123代表事件捕獲,4567代表事件冒泡。首先我們使用下面的代碼:
<div id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'> <div id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></div> </div>
假設(shè)我們點(diǎn)擊了ID為inner的div,那么此時(shí)的事件流程就是,首先執(zhí)行捕獲階段:document-html-body-div(outer)。然后執(zhí)行冒泡階段:div(inner)-div(outer)-body-html-document。
2. DOM2級(jí)的注冊(cè)事件和解除事件
在DOM2級(jí)中使用addEventListener和removeEventListener來(lái)注冊(cè)和解除事件(IE8及之前版本不支持)。這種函數(shù)較之之前的方法好處是一個(gè)dom對(duì)象可以注冊(cè)多個(gè)相同類(lèi)型的事件,不會(huì)發(fā)生事件的覆蓋,會(huì)依次的執(zhí)行各個(gè)事件函數(shù)。
addEventListener('事件名稱(chēng)','事件回調(diào)','捕獲/冒泡')。示例如下:
<div id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'> <div id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></div> </div> <script> var click = document.getElementById('inner'); click.addEventListener('click',function(){ alert('click one'); },false); click.addEventListener('click',function(){ alert('click two'); },false); </script>
首先我們要知道addEventListenr的第一個(gè)參數(shù)是事件名稱(chēng),與DOM0級(jí)不同的是沒(méi)有”on“,另外第三個(gè)參數(shù)代表捕獲還是冒泡,true代表捕獲事件,false代表冒泡事件。
而在這段代碼中,我們?yōu)閕nner的div注冊(cè)了兩個(gè)click事件函數(shù),結(jié)果是瀏覽器會(huì)依次執(zhí)行這兩個(gè)函數(shù)。
下面我們演示如何使用事件流的發(fā)生機(jī)制。
<div id = 'outer' style = 'margin: 100px 0 0 100px; width: 200px;height: 200px; background: red;'> <div id="inner" style = 'margin-left:20px; width: 50px;height:50px; background: green;'></div> </div> <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中的,所以我們知道當(dāng)使用捕獲的時(shí)候outer是應(yīng)該首先捕獲到這個(gè)事件的,其次inner才能捕獲到這個(gè)事件。那么結(jié)果就是outer首先執(zhí)行,其次是inner執(zhí)行。
那么我把outer的執(zhí)行時(shí)機(jī)改為冒泡的階段呢?
alickouter.addEventListener('click',function(){ alert('outer show'); },false);
這種情況下,就是先執(zhí)行inner后執(zhí)行outer了。同理我們把二者的事件執(zhí)行時(shí)機(jī)都改為冒泡階段的話,依舊是先執(zhí)行inner后執(zhí)行outer。那么還有個(gè)問(wèn)題,就是如果我們把inner注冊(cè)兩個(gè)click事件,一個(gè)是在捕獲階段,另一個(gè)是在冒泡階段,也就是說(shuō)把a(bǔ)ddEventListenter的第三個(gè)參數(shù)分別設(shè)置為false和true,那么執(zhí)行的順序又是怎樣的呢。
<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。但是這種結(jié)果是與注冊(cè)的順序有關(guān)系的,先注冊(cè)就先執(zhí)行。因?yàn)槲覀冊(cè)诳词录东@和事件冒泡示意圖,發(fā)現(xiàn)最后具體的dom對(duì)象是只有一個(gè)的。
那么 如果我們給outer和inner都注冊(cè)了click事件但是我不希望outer執(zhí)行怎么辦呢?這個(gè)時(shí)候我們就需要用到stopPropagation函數(shù)了,這個(gè)函數(shù)是用來(lái)阻止冒泡,言下之意是讓事件不再繼續(xù)冒泡下去,這樣接下來(lái)注冊(cè)同樣類(lèi)型事件的dom對(duì)象就不會(huì)執(zhí)行了。
比如在自制下拉框的時(shí)候,我們點(diǎn)擊瀏覽器的其他位置,我們需要下拉框的options隱藏,這時(shí)我們就要用到stopPropagation了。如下:
<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>
正常的情況下,我們?cè)诓惶砑觭topPropagation函數(shù)時(shí),首先應(yīng)該執(zhí)行inner,然后執(zhí)行outer,但是當(dāng)我們?cè)趇nner的事件函數(shù)中添加了stopPropagation函數(shù)之后,執(zhí)行完inner的事件函數(shù)之后,就不會(huì)在執(zhí)行outer的事件函數(shù)了,也可以理解為事件冒泡到inner之后就消失了,因此也就不會(huì)在執(zhí)行接下來(lái)的事件函數(shù)了。
由于事件捕獲階段沒(méi)有可以阻止事件的函數(shù),所以一般都是設(shè)置為事件冒泡。
好了以上就是全部?jī)?nèi)容啦 ,希望對(duì)大家的學(xué)習(xí)有所幫助~~
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。