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