資訊專欄INFORMATION COLUMN
摘要：和支持這個(gè)事件。特定于事件目標(biāo)的對象的數(shù)組。這個(gè)事件的目的是提供與文檔或元素的加載狀態(tài)有關(guān)的信息和有一個(gè)特性，名叫往返緩存，或，這個(gè)事件在頁面顯示時(shí)觸發(fā)該事件會(huì)在瀏覽器卸載頁面的時(shí)候觸發(fā)事件的對象還包含一個(gè)名為的布爾值屬性。
事件類型 UI事件
load：當(dāng)頁面完全加載后在window 上面觸發(fā)，當(dāng)所有框架都加載完畢時(shí)在框架集上面觸發(fā)，當(dāng)圖像加載完畢時(shí)在元素上面觸發(fā)，或者當(dāng)嵌入的內(nèi)容加載完畢時(shí)在元素上面觸發(fā)
unload:當(dāng)頁面完全卸載后在window 上面觸發(fā)，當(dāng)所有框架都卸載后在框架集上面觸發(fā)，或者當(dāng)嵌入的內(nèi)容卸載完畢后在元素上面觸發(fā)
resize：當(dāng)窗口或框架的大小變化時(shí)在window 或框架上面觸發(fā)
scroll：當(dāng)用戶滾動(dòng)帶滾動(dòng)條的元素中的內(nèi)容時(shí)，在該元素上面觸發(fā)。元素中包含所加載頁面的滾動(dòng)條
error：當(dāng)發(fā)生JavaScript 錯(cuò)誤時(shí)在window上面觸發(fā)，當(dāng)無法加載圖像時(shí)在元素上面觸發(fā)，當(dāng)無法加載嵌入內(nèi)容時(shí)在元素上面觸發(fā)，或者當(dāng)有一或多個(gè)框架無法加載時(shí)在框架集上面觸發(fā)
這些事件在DOM2級(jí)事件中都?xì)w為html事件,可以通過以下代碼判斷瀏覽器是否支持DOM2級(jí)事件
var isSupported = document.implementation.hasFeature("HTMLEvents",2.0);
焦點(diǎn)事件
blur：在元素失去焦點(diǎn)時(shí)觸發(fā)。這個(gè)事件不會(huì)冒泡；所有瀏覽器都支持它.
focus：在元素獲得焦點(diǎn)時(shí)觸發(fā)。這個(gè)事件不會(huì)冒泡；所有瀏覽器都支持它
鼠標(biāo)與滾輪事件click：在用戶單擊主鼠標(biāo)按鈕（一般是左邊的按鈕）或者按下回車鍵時(shí)觸發(fā)。這一點(diǎn)對確保易訪問性很重要，意味著onclick 事件處理程序既可以通過鍵盤也可以通過鼠標(biāo)執(zhí)行
dblclick：在用戶雙擊主鼠標(biāo)按鈕（一般是左邊的按鈕）時(shí)觸發(fā)。從技術(shù)上說，這個(gè)事件并不是DOM2 級(jí)事件規(guī)范中規(guī)定的，但鑒于它得到了廣泛支持，所以DOM3 級(jí)事件將其納入了標(biāo)準(zhǔn)。
mousedown：在用戶按下了任意鼠標(biāo)按鈕時(shí)觸發(fā)。不能通過鍵盤觸發(fā)這個(gè)事件。
mouseenter：在鼠標(biāo)光標(biāo)從元素外部首次移動(dòng)到元素范圍之內(nèi)時(shí)觸發(fā)。這個(gè)事件不冒泡，而且在光標(biāo)移動(dòng)到后代元素上不會(huì)觸發(fā)。DOM2 級(jí)事件并沒有定義這個(gè)事件，但DOM3 級(jí)事件將它納入了規(guī)范。IE、Firefox 9+和Opera 支持這個(gè)事件。
mouseleave：在位于元素上方的鼠標(biāo)光標(biāo)移動(dòng)到元素范圍之外時(shí)觸發(fā)。這個(gè)事件不冒泡，而且在光標(biāo)移動(dòng)到后代元素上不會(huì)觸發(fā)。DOM2 級(jí)事件并沒有定義這個(gè)事件，但DOM3 級(jí)事件將它納入了規(guī)范。IE、Firefox 9+和Opera 支持這個(gè)事件
mousemove：當(dāng)鼠標(biāo)指針在元素內(nèi)部移動(dòng)時(shí)重復(fù)地觸發(fā)。不能通過鍵盤觸發(fā)這個(gè)事件。
mouseout：在鼠標(biāo)指針位于一個(gè)元素上方，然后用戶將其移入另一個(gè)元素時(shí)觸發(fā)。又移入的另一個(gè)元素可能位于前一個(gè)元素的外部，也可能是這個(gè)元素的子元素。不能通過鍵盤觸發(fā)這個(gè)事件。
mouseover：在鼠標(biāo)指針位于一個(gè)元素外部，然后用戶將其首次移入另一個(gè)元素邊界之內(nèi)時(shí)觸發(fā)。不能通過鍵盤觸發(fā)這個(gè)事件
mouseup：在用戶釋放鼠標(biāo)按鈕時(shí)觸發(fā)。不能通過鍵盤觸發(fā)這個(gè)事件
mousewheel：當(dāng)用戶通過鼠標(biāo)滾輪與頁面交互、在垂直方向上滾動(dòng)頁面時(shí)（無論向上還是向下），就會(huì)觸發(fā)mousewheel事件
使用以下代碼可以檢測瀏覽器是否支持以上DOM2 級(jí)事件（除dbclick、mouseenter 和mouseleave 之外）：
var isSupported = document.implementation.hasFeature("MouseEvents", "2.0");
要檢測瀏覽器是否支持上面的所有事件，可以使用以下代碼：
var isSupported = document.implementation.hasFeature("MouseEvent", "3.0")
鼠標(biāo)事件都是在瀏覽器視口中的特定位置上發(fā)生的。這個(gè)位置信息保存在事件對象的clientX 和clientY 屬性中。所有瀏覽器都支持這兩個(gè)屬性
通過客戶區(qū)坐標(biāo)能夠知道鼠標(biāo)是在視口中什么位置發(fā)生的，而頁面坐標(biāo)通過事件對象的pageX 和pageY 屬性,在頁面沒有滾動(dòng)的情況下，pageX 和pageY 的值與clientX 和clientY 的值相等。IE8 及更早版本不支持事件對象上的頁面坐標(biāo)，不過使用客戶區(qū)坐標(biāo)和滾動(dòng)信息可以計(jì)算出來。
鼠標(biāo)事件發(fā)生時(shí)，不僅會(huì)有相對于瀏覽器窗口的位置，還有一個(gè)相對于整個(gè)電腦屏幕的位置。而通過screenX 和screenY屬性就可以確定鼠標(biāo)事件發(fā)生時(shí)鼠標(biāo)指針相對于整個(gè)屏幕的坐標(biāo)信息
雖然鼠標(biāo)事件主要是使用鼠標(biāo)來觸發(fā)的，但在按下鼠標(biāo)時(shí)鍵盤上的某些鍵的狀態(tài)也可以影響到所要采取的操作。這些修改鍵就是Shift、Ctrl、Alt 和Meta（在Windows 鍵盤中是Windows 鍵，在蘋果機(jī)中是Cmd 鍵），它們經(jīng)常被用來修改鼠標(biāo)事件的行為。DOM 為此規(guī)定了4 個(gè)屬性，表示這些修改鍵的狀態(tài)：shiftKey、ctrlKey、altKey 和metaKey。這些屬性中包含的都是布爾值，如果相應(yīng)的鍵被按下了，則值為true，否則值為false。
IE9、Firefox、Safari、Chrome 和Opera 都支持這4 個(gè)鍵。IE8 及之前版本不支持metaKey 屬性
keydown：當(dāng)用戶按下鍵盤上的任意鍵時(shí)觸發(fā)，而且如果按住不放的話，會(huì)重復(fù)觸發(fā)此事件。
keypress：當(dāng)用戶按下鍵盤上的字符鍵時(shí)觸發(fā)，而且如果按住不放的話，會(huì)重復(fù)觸發(fā)此事件。按下Esc 鍵也會(huì)觸發(fā)這個(gè)事件
keyup：當(dāng)用戶釋放鍵盤上的鍵時(shí)觸發(fā)。
textInput:DOM3 級(jí)事件,這個(gè)事件是對keypress的補(bǔ)充，用意是在將文本顯示給用戶之前更容易攔截文本。在文本插入文本框之前會(huì)觸發(fā)textInput 事件,支持textInput的瀏覽器有IE9+、Safari 和Chrome
在發(fā)生 keydown 和keyup 事件時(shí)，event 對象的keyCode 屬性中會(huì)包含一個(gè)代碼，與鍵盤上一
個(gè)特定的鍵對應(yīng)。對數(shù)字字母字符鍵，keyCode 屬性的值與ASCII 碼中對應(yīng)小寫字母或數(shù)字的編碼相
同。因此，數(shù)字鍵7 的keyCode 值為55，而字母A 鍵的keyCode 值為65——與Shift 鍵的狀態(tài)無關(guān),具體怎么對應(yīng)的可以自己測試或者百度.
DOM 和IE 的event 對象都支持keyCode 屬性
touchstart:當(dāng)手指觸摸屏幕時(shí)觸發(fā)；即使已經(jīng)有一個(gè)手指放在了屏幕上也會(huì)觸發(fā)。
touchmove:當(dāng)手指在屏幕上滑動(dòng)時(shí)連續(xù)地觸發(fā)。在這個(gè)事件發(fā)生期間，調(diào)用preventDefault()
可以阻止?jié)L動(dòng)
touchend:當(dāng)手指從屏幕上移開時(shí)觸發(fā)。
每個(gè)觸摸事件的event 對象都提供了在鼠標(biāo)事件中常見的屬性：
bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、
ctrlKey 和metaKey.
除了常見的 DOM屬性外，觸摸事件還包含下列三個(gè)用于跟蹤觸摸的屬性。
touches：表示當(dāng)前跟蹤的觸摸操作的Touch 對象的數(shù)組。
targetTouchs：特定于事件目標(biāo)的Touch 對象的數(shù)組。
changeTouches：表示自上次觸摸以來發(fā)生了什么改變的Touch 對象的數(shù)組。每個(gè) Touch 對象包含下列屬性。
每個(gè) Touch 對象包含下列屬性。
clientX：觸摸目標(biāo)在視口中的x 坐標(biāo)。
clientY：觸摸目標(biāo)在視口中的y 坐標(biāo)。
identifier：標(biāo)識(shí)觸摸的唯一ID。
pageX：觸摸目標(biāo)在頁面中的x 坐標(biāo)。
pageY：觸摸目標(biāo)在頁面中的y 坐標(biāo)。
screenX：觸摸目標(biāo)在屏幕中的x 坐標(biāo)。
screenY：觸摸目標(biāo)在屏幕中的y 坐標(biāo)。
target：觸摸的DOM 節(jié)點(diǎn)目標(biāo)。
EventUtil.addEventHandler(document,"touchstart",function(e){
e = EventUtil.getEvent(e);
document.getElementById("touchstart").innerHTML=e.type+":x="+e.changedTouches[0].clientX+",y="+e.changedTouches[0].clientY;
});
EventUtil.addEventHandler(document,"touchmove",function(e){
e = EventUtil.getEvent(e);
EventUtil.preventDefault(e);
document.getElementById("touchmove").innerHTML=e.type+":x="+e.changedTouches[0].clientX+",y="+e.changedTouches[0].clientY;
});
EventUtil.addEventHandler(document,"touchend",function(e){
e = EventUtil.getEvent(e);
document.getElementById("touchend").innerHTML=e.type+":x="+e.changedTouches[0].clientX+",y="+e.changedTouches[0].clientY;
});
HTML5事件
contextmenu: 支持 contextmenu 事件的瀏覽器有IE、Firefox、Safari、Chrome 和Opera 11+.
beforeunload: IE 和Firefox、Safari 和Chrome 都支持beforeunload 事件.
DOMContentLoaded: 形成完整的DOM 樹之后就會(huì)觸發(fā)，不理會(huì)圖像、JavaScript 文件、CSS 文件或其他資源是否已經(jīng)下載完畢.IE9+、Firefox、Chrome、Safari 3.1+和Opera 9+都支持DOMContentLoaded 事件，對于不支持DOMContentLoaded 的瀏覽器，我們建議在頁面加載期間設(shè)置一個(gè)時(shí)間為0 毫秒的超時(shí)調(diào)用.
readystatechange:IE 為DOM文檔中的某些部分提供了readystatechange 事件。這個(gè)事件的目的是提供與文檔或元素的加載狀態(tài)有關(guān)的信息.
pageshow,pagehide:Firefox 和Opera 有一個(gè)特性，名叫“往返緩存”（back-forward cache，或bfcache）,pageshow，這個(gè)事件在頁面顯示時(shí)觸發(fā),pagehide該事件會(huì)在瀏覽器卸載頁面的時(shí)候觸發(fā),pageshow,pagehide 事件的event 對象還包含一個(gè)名為persisted 的布爾值屬性。如果頁面被保存在了bfcache 中，則這個(gè)屬性的值為true.兼容性：Firefox、Safari 5+、Chrome 和Opera。
hashchange:URL 的參數(shù)列表（及URL 中“#”號(hào)后面的所有字符串）發(fā)生變化時(shí)觸發(fā)。兼容性:IE8+、Firefox 3.6+、Safari 5+、Chrome 和Opera 10.6+。
//for item 3
setTimeout(function(){
//do something
},0);
變動(dòng)事件
DOMSubtreeModified：在DOM 結(jié)構(gòu)中發(fā)生任何變化時(shí)觸發(fā)。這個(gè)事件在其他任何事件觸發(fā)后都會(huì)觸發(fā)。
DOMNodeInserted：在一個(gè)節(jié)點(diǎn)作為子節(jié)點(diǎn)被插入到另一個(gè)節(jié)點(diǎn)中時(shí)觸發(fā)。
DOMNodeRemoved：在節(jié)點(diǎn)從其父節(jié)點(diǎn)中被移除時(shí)觸發(fā)。
DOMNodeInsertedIntoDocument：在一個(gè)節(jié)點(diǎn)被直接插入文檔或通過子樹間接插入文檔之后觸發(fā)。這個(gè)事件在DOMNodeInserted 之后觸發(fā)。
DOMNodeRemovedFromDocument：在一個(gè)節(jié)點(diǎn)被直接從文檔中移除或通過子樹間接從文檔中移除之前觸發(fā)。這個(gè)事件在DOMNodeRemoved 之后觸發(fā)。
DOMAttrModified：在特性被修改之后觸發(fā)。
DOMCharacterDataModified：在文本節(jié)點(diǎn)的值發(fā)生變化時(shí)觸發(fā)。
DOMSubtreeModified DOMNodeInserted DOMNodeRemoved兼容性:Firefox 3+ Safari 3+及Chrome IE9+
內(nèi)存和性能影響內(nèi)存和性能的因素：首先，每個(gè)函數(shù)都是對象，都會(huì)占用內(nèi)存；內(nèi)存中的對象越多，性能就越差。其次，必須事先指定所有事件處理程序而導(dǎo)致的DOM訪問次數(shù)，會(huì)延遲整個(gè)頁面的交互就緒時(shí)間。
優(yōu)化方案:通過事件委托和移除事件處理程序.
//傳統(tǒng)做法
var item1 = document.getElementById("goSomewhere");
var item2 = document.getElementById("doSomething");
var item3 = document.getElementById("sayHi");
EventUtil.addHandler(item1, "click", function(event){
location.;
});
EventUtil.addHandler(item2, "click", function(event){
document.title = "I changed the document"s title";
});
EventUtil.addHandler(item3, "click", function(event){
alert("hi");
});
//事件委托
var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "doSomething":
document.title = "I changed the document"s title";
break;
case "goSomewhere":
location.;
break;
case "sayHi":
alert("hi");
break;
}
});
移除事件處理程序
當(dāng)頁面的元素被替換前需要移除其事件處理程序,頁面卸載前也需要移除事件處理程序(通過onunload 事件處理程序移除所有事件處理程序).因?yàn)轫撁嫘遁d后有些瀏覽器依然將事件處理程序保存在內(nèi)存中,IE8 及更早版本在這種
情況下依然是問題最多的瀏覽器，盡管其他瀏覽器或多或少也有類似的問題.
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/86204.html
摘要：事件捕獲的用意在于事件到達(dá)預(yù)定目標(biāo)之前捕獲它。級(jí)事件流規(guī)定的事件流包括三個(gè)階段事件捕獲階段處于目標(biāo)階段和冒泡階段。首先發(fā)生的是事件捕獲，為截獲事件提供了機(jī)會(huì)。最后一個(gè)階段是冒泡階段，可以在這個(gè)階段對事件作出響應(yīng)。 一.基本概念:事件流是什么?有哪些事件流? 事件流是描述頁面接收事件的順序 具體的有 事件冒泡 事件捕獲 DOM事件流 事件冒泡又叫IE的事件流，即事件...
摘要：情況沒有明確作用對象的情況下，通常為全局對象例如函數(shù)的回調(diào)函數(shù)，它的就是全局對象。正因如此，機(jī)器可以作為這類對象的標(biāo)志，即面向?qū)ο笳Z言中類的概念。所以機(jī)器又被稱為構(gòu)造函數(shù)。原型鏈也就是繼承鏈。 JS面向?qū)ο蠖?this/原型鏈/new原理 阮一峰JavaScript教程:面向?qū)ο缶幊?阮一峰JavaScript教程:實(shí)例對象與 new 命令 阮一峰JavaScript教程:this 關(guān)...
摘要：鼠標(biāo)滾輪事件當(dāng)在被綁定的對象上如某個(gè)或者發(fā)生鼠標(biāo)滾輪滾動(dòng)時(shí)觸發(fā)。 鼠標(biāo)滾輪事件 當(dāng)在被綁定的對象上(如：某個(gè)div或者doucument)發(fā)生鼠標(biāo)滾輪滾動(dòng)時(shí)觸發(fā)。 在不同的瀏覽器中有不同的表現(xiàn)形式： 一、ie/chrome下的事件 : onmousewheel 事件綁定方式：on 或者 addEventListener[attachEvent] 獲取滾輪事件具體信息：ev...
摘要：運(yùn)行時(shí)環(huán)境與大多數(shù)應(yīng)用程序所期望的環(huán)境不同。不過程序是要手動(dòng)交換緩沖區(qū)的。第一個(gè)主題介紹代碼可移植性與限制第二個(gè)主題介紹的運(yùn)行時(shí)環(huán)境第三個(gè)主題第一篇文章介紹連接和第三個(gè)主題第二篇文章介紹第四個(gè)主題介紹文件和文件系統(tǒng)第六個(gè)主題介紹如何調(diào)試代碼 翻譯：云荒杯傾本文是Emscripten-WebAssembly專欄系列文章之一，更多文章請查看專欄。也可以去作者的博客閱讀文章。 Emscrip...
閱讀 2767·2023-04-26 00:07
閱讀 2498·2021-11-15 11:37
閱讀 718·2021-10-19 11:44
閱讀 2241·2021-09-22 15:56
閱讀 1828·2021-09-10 10:50
閱讀 1572·2021-08-18 10:21
閱讀 2668·2019-08-30 15:53
閱讀 1695·2019-08-30 11:11
