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