javascript事件流是什么?有哪些事件流?

JavaScript對(duì)這種問題的處理方式可以稱之為事件流即事件的傳播機(jī)制。對(duì)于事件流IE跟FF有不同的解釋。IE下的解決方案稱之為：

創(chuàng)新互聯(lián)是專業(yè)的景縣網(wǎng)站建設(shè)公司，景縣接單;提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行景縣網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

冒泡型事件，而FF下稱之為：捕獲型事件。顧名思義冒泡型事件是從低而上的觸發(fā)機(jī)制，而捕獲型事件則是從上到下的觸發(fā)機(jī)制?！禞avaScript高級(jí)程序設(shè)計(jì)》一書提到:

DOM事件流同時(shí)支持兩種事件觸發(fā)機(jī)制，但是捕獲型事件先發(fā)生。注意因?yàn)槭录哪繕?biāo)（也就是DOM樹最深的節(jié)點(diǎn)）是最精確的元素，實(shí)際上它會(huì)連續(xù)接收兩次事件，一次是在捕獲過程中，一次是在冒泡過程中。事情到底是不是這樣呢？觀察下面的程序：

＜html onclick=" clickHandle('html'); "＞

＜head＞

＜title＞JAVASCRIPT事件流＜/title＞

＜meta http-equiv="content-type" content="text/html; charset=GBK"＞

＜script type="text/javascript"＞

function clickHandle(ele){

alert(ele);?

}

＜/script＞

＜/head＞

＜body onclick=" clickHandle('body'); "＞

＜div style="bgcolor:red" onclick=" clickHandle('div'); "＞click me!＜/div＞

＜/body＞

＜/html＞

IE：點(diǎn)擊 click me 運(yùn)行順序?yàn)椋篋IV--＞BODY--＞HTML 點(diǎn)擊頁面其他部分：BODY--＞HTML

FF: 點(diǎn)擊 click me 運(yùn)行順序?yàn)椋篋IV--＞HTML--＞BODY 點(diǎn)擊頁面其他部分：HTML--＞BODY

JavaScript為我們提供了三種事件處理函數(shù)的分配方式，第一種就像上面的程序一樣，是在HTML代碼中分配事件處理函數(shù)。

第二種方法是在JavaScript中分配事件處理函數(shù)，這種方法首先必須得獲得要分配事件處理函數(shù)的元素的引用，參考以下程序：

1 window.onload = function(){

2 var oDiv = document.getElementById("contentDiv");

3 oDiv.onclick = function(){

4 alert(oDiv.innerHTML);

5 }

6 }

就像上面提到的，該方法在分配事件處理函數(shù)時(shí)必須保證已經(jīng)獲得對(duì)該元素的引用，所以這個(gè)程序才把oDiv的onclick事件放在了onload事件的內(nèi)部，否則會(huì)報(bào)oDiv未被定義。

還有一個(gè)需要注意的地方是使用這種事件處理函數(shù)的分配方式時(shí)只能為某個(gè)特定的事件分配一個(gè)函數(shù)且事件函數(shù)的簽名必須小寫，否則前面分配的函數(shù)會(huì)被后面的函數(shù)所覆蓋。

如果想為同一個(gè)事件分配兩個(gè)以上的處理函數(shù)，需要采用第三種事件處理函數(shù)分配方式。

在IE中我們使用obj.attachEvent()方法為某個(gè)元素分配函數(shù)，使用obj.detachEvent()方法為某個(gè)元素分離事件處理函數(shù)，而在DOM（以FireFox為例）中我們使用addEventListener()方法分配函數(shù)，使用removeEventListener()方法分離函數(shù)。

參考一下代碼：

1 window.onload = function(){

2 var oDiv = document.getElementById("contentDiv");?

3 var func1 = function(){

4 alert(oDiv.innerHTML);?

5 }

6 var func2 = function(){

7 alert("also " + oDiv.innerHTML);?

8 }

9 //IE

10 if(oDiv.attachEvent){

11 oDiv.attachEvent("onclick",func1);?

12 oDiv.attachEvent("onclick",func2);?

13 //oDiv.detachEvent("onclick",func1);?

14 } else if(oDiv.addEventListener){

15 //FireFox

16 oDiv.addEventListener("click",func1,true);?

17 oDiv.addEventListener("click",func2,true);?

18 //oDiv.removeEventListener("click",func1,true);?

19 }

20?

21 }

我們來說明一下IE下與FireFox下這種事件處理函數(shù)的不同點(diǎn)：

1、在函數(shù)的第一個(gè)參數(shù)中，IE下必須有"on"做為前綴，而FF下不用，兩種情況下處理函數(shù)簽名必須小寫。

2、FireFox下的addEventListener()函數(shù)的第三個(gè)參數(shù)表示的是：true表示在捕獲階段增加事件處理函數(shù)，false表示在冒泡階段增加事件處理函數(shù)，但是由于FireFox不支持冒泡事件流，所以這里我們設(shè)成True或者Flase好像沒什么區(qū)別。

但是要注意的一點(diǎn)就是，如果在 addEventListener()中第三個(gè)參數(shù)設(shè)為true,那么在removeEventListener()方法中的第三個(gè)參數(shù)一定也要設(shè)為相同的值，否則方法失效。

3、在運(yùn)行時(shí)階段，IE首先執(zhí)行的是最后邊一個(gè)被增加的事件處理函數(shù)然后才是倒數(shù)第二個(gè)以此類推，但是在FireFox下與IE相反，他會(huì)按照事件處理函數(shù)的添加順序執(zhí)行。

什么是JavaScript事件流及事件處理程序詳解

先提兩個(gè)關(guān)鍵詞，方便你查找更詳細(xì)的分析：1）事件冒泡 2）事件捕獲

然后借用一下網(wǎng)上的一個(gè)圖：

如圖：有三個(gè)圓，好比dom中的三個(gè)div，當(dāng)你點(diǎn)擊了綠色圓的同時(shí)，會(huì)有兩個(gè)連帶事件：

點(diǎn)擊了藍(lán)圓

點(diǎn)擊了粉圓

那么當(dāng)你這三個(gè)圓（div）都綁定了點(diǎn)擊事件時(shí)，該怎么觸發(fā)呢，同時(shí)觸發(fā)？顯然不是，這是就涉及到一開始給你的兩個(gè)關(guān)鍵詞了。

事件捕獲：js會(huì)順著文檔流順序由外往內(nèi)，依次觸發(fā)事件。即從DOM樹的根到葉子，粉-藍(lán)-綠

事件冒泡：js會(huì)逆著文檔流順序由內(nèi)至外，一次觸發(fā)事件。即從DOM樹的葉子到根，綠-藍(lán)-粉

補(bǔ)充一點(diǎn)：多數(shù)時(shí)候推薦事件冒泡，因?yàn)榇蠖鄶?shù)主流瀏覽器都兼容兩種事件，但一開始ie是不支持事件捕獲的，后來ie是否支持最近沒有具體了解，應(yīng)該是可以設(shè)置，有需要可以百度一下，本人小菜，以上回答如有錯(cuò)誤還請指出，謝謝。

javascript的文檔流是什么意思

Javascript是一種由Netscape的LiveScript發(fā)展而來的原型化繼承的面向?qū)ο蟮膭?dòng)態(tài)類型的區(qū)分大小寫的客戶端腳本語言，主要目的是為了解決服務(wù)器端語言，比如Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果。當(dāng)時(shí)服務(wù)端需要對(duì)數(shù)據(jù)進(jìn)行驗(yàn)證，由于網(wǎng)絡(luò)速度相當(dāng)緩慢，只有28.8kbps，驗(yàn)證步驟浪費(fèi)的時(shí)間太多。于是Netscape的瀏覽器Navigator加入了Javascript，提供了數(shù)據(jù)驗(yàn)證的基本功能。

文檔流是文檔中可顯示對(duì)象在排列時(shí)所占用的位置。比如網(wǎng)頁的div標(biāo)簽它默認(rèn)占用的寬度位置是一整行，p標(biāo)簽?zāi)J(rèn)占用寬度也是一整行，因?yàn)閐iv標(biāo)簽和p標(biāo)簽是塊狀對(duì)象。 網(wǎng)頁中大部分對(duì)象默認(rèn)是占用文檔流，也有一些對(duì)象是不占文檔流的，比如表單中隱藏域。當(dāng)然我們也可以讓占用文檔流的元素轉(zhuǎn)換成不占文檔流，這就要用到CSS中屬性position來控制。 看看CSS 2.0對(duì)position的定義：檢索對(duì)象的定位方式。共有4種取值。 static：默認(rèn)值，無特殊（靜態(tài)）定位。對(duì)象遵循HTML定位規(guī)則 。 absolute：絕對(duì)定位。將對(duì)象從文檔流中拖出，使用left，right，top，bottom等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位。如果不存在這樣的父對(duì)象，則依據(jù)body對(duì)象。而其層疊通過z-index屬性定義 。當(dāng)對(duì)象定位在瀏覽器窗口以外，瀏覽器因此顯示滾動(dòng)條。 fixed：固定定位。對(duì)象定位遵從絕對(duì)(absolute)方式。但是要遵守一些規(guī)范。當(dāng)對(duì)象定位在瀏覽器窗口以外，瀏覽器不會(huì)因此顯示滾動(dòng)條，而當(dāng)滾動(dòng)條滾動(dòng)時(shí)，對(duì)象始終固定在原來位置。 relative：相對(duì)定位。對(duì)象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置。當(dāng)對(duì)象定位在瀏覽器窗口以外，瀏覽器因此顯示滾動(dòng)條。 inherit：繼承值，對(duì)象將繼承其父對(duì)象相應(yīng)的值。[1]

Javascript的事件流模型都有什么?

JavaScript中的事件流模型有冒泡事件流、捕獲事件流和DOM事件流。其中dom同時(shí)支持兩種事件模型，但捕獲性事件先開始，從document開始也結(jié)束于document，dom模型的獨(dú)特之處在于文本也可以觸發(fā)事件

網(wǎng)頁標(biāo)題：javascript流,js文檔流
分享URL：http://jinyejixie.com/article42/dsdjeec.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、微信小程序、搜索引擎優(yōu)化、網(wǎng)站設(shè)計(jì)公司、微信公眾號(hào)、網(wǎng)站維護(hù)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)