window、document、html、body、element的事件屬性比較

在分析jQuery的事件的時候有提到綁定事件的方式:

Dean Edwards的跨瀏覽器事件綁定使用的方式是

element["on" + type] = handleEvent;

  即綁定的事件的前提條件是element.onxxx屬性必須存在。

jQuery的綁定方式是使用瀏覽器的綁定綁定方法

if ( elem.addEventListener ) {
  elem.addEventListener( type, eventHandle, false );

} else if ( elem.attachEvent ) {
  elem.attachEvent( "on" + type, eventHandle );
}

  爲什麼不用Dean Edwards使用的方式來綁定?

原因:

  並非所有瀏覽器支持的事件都有對應的["on" + type]屬性。比較典型的例子動畫事件

<style>
#myDIV {
margin:25px;
width:550px;
height:100px;
background:orange;
position:relative;
font-size:20px;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
@keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
</style>


<p>該實例使用了 addEventListener() 方法爲 DIV 元素添加"animationstart", "animationiteration" 和 "animationend" 事件。</p> <div id="myDIV" >點我開始動畫</div> <script> var x = document.getElementById("myDIV") //存在onclick屬性 x.onclick = myFunction; // 使用 JavaScript 開始動畫 function myFunction() { //x.style.WebkitAnimation = "mymove 4s 2"; // Chrome, Safari 和 Opera 代碼 x.style.animation = "mymove 4s 2"; } // Chrome, Safari 和 Opera //x.addEventListener("webkitAnimationStart", myStartFunction); //x.addEventListener("webkitAnimationIteration", myIterationFunction); //x.addEventListener("webkitAnimationEnd", myEndFunction); x.addEventListener("animationstart", myStartFunction); x.addEventListener("animationiteration", myIterationFunction); x.addEventListener("animationend", myEndFunction); function myStartFunction() { this.innerHTML = "animationstart 事件觸發 - 動畫已經開始"; this.style.backgroundColor = "pink"; } function myIterationFunction() { this.innerHTML = "animationiteration 事件觸發 - 動畫重新播放"; this.style.backgroundColor = "lightblue"; } function myEndFunction() { this.innerHTML = "animationend 事件觸發 - 動畫已經完成"; this.style.backgroundColor = "lightgray"; } </script>

  上面的例子在IE10+、webkit4.0+內核瀏覽器(chrome、Opera、safari)、Firefox16.0+都能正常運行。但是如果將動畫的綁定事件換成

x.onanimationstart = myStartFunction;
x.onanimationiteration = myIterationFunction;
x.onanimationend = myEndFunction;

  三個動畫函數沒有任何一個能夠正常運行。

  所以現在明白jQuery爲什麼使用原生的事件綁定方法了吧。

  

  document.documentElement即html標籤的DOM對象

  document.body即body標點的DOM對象

   以chrome/IE8/IE9/firefox爲例,簡易的比較一下window、document、html、body、element的onxxx屬性

  說明:表格中yes表示對象擁有該屬性,否則沒有

 

chrome45.0中所有的onxxx屬性

on事件 window document html body element
onabort yes yes yes yes yes
onanimationend yes        
onanimationiteration yes        
onanimationstart yes        
onautocomplete yes yes yes yes yes
onautocompleteerror yes yes yes yes yes
onbeforeunload yes     yes  
onbeforecopy   yes yes yes yes
onbeforecut   yes yes yes yes
onbeforepaste   yes yes yes yes
onblur yes yes yes yes yes
oncancel yes yes yes yes yes
oncanplay yes yes yes yes yes
oncanplaythrough yes yes yes yes yes
onchange yes yes yes yes yes
onclick yes yes yes yes yes
onclose yes yes yes yes yes
oncontextmenu yes yes yes yes yes
oncuechange yes yes yes yes yes
ondblclick yes yes yes yes yes
ondevicemotion yes yes yes yes yes
ondeviceorientation yes yes yes yes yes
ondrag yes yes yes yes yes
ondragend yes yes yes yes yes
ondragenter yes yes yes yes yes
ondragleave yes yes yes yes yes
ondragover yes yes yes yes yes
ondragstart yes yes yes yes yes
ondrop yes yes yes yes yes
ondurationchange yes yes yes yes yes
onemptied yes yes yes yes yes
onended yes yes yes yes yes
onerror yes yes yes yes yes
onfocus yes yes yes yes yes
onhashchange yes     yes  
oninput yes yes yes yes yes
oninvalid yes yes yes yes yes
onkeydown yes yes yes yes yes
onkeypress yes yes yes yes yes
onkeyup yes yes yes yes yes
onlanguagechange yes     yes  
onload yes yes yes yes yes
onloadeddata yes yes yes yes yes
onloadedmetadata yes yes yes yes yes
onloadstart yes yes yes yes yes
onmessage yes     yes  
onmousedown yes yes yes yes yes
onmouseenter yes yes yes yes yes
onmouseleave yes yes yes yes yes
onmousemove yes yes yes yes yes
onmouseout yes yes yes yes yes
onmouseover yes yes yes yes yes
onmouseup yes yes yes yes yes
onmousewheel(不推薦,用onwheel替代) yes yes yes yes yes
onoffline yes     yes  
ononline yes     yes  
onpagehide yes     yes  
onpageshow yes     yes  
onpaste   yes yes yes yes
onpause yes yes yes yes yes
onplay yes yes yes yes yes
onplaying yes yes yes yes yes
onpopstate yes     yes  
onpointerlockchange   yes      
onpointerlockerror   yes      
onprogress yes yes yes yes yes
onratechange yes yes yes yes yes
onreadystatechange   yes      
onreset yes yes yes yes yes
onresize yes yes yes yes yes
onscroll yes yes yes yes yes
onsearch yes yes yes yes yes
onseeked yes yes yes yes yes
onseeking yes yes yes yes yes
onselect yes yes yes yes yes
onselectionchange   yes      
onselectstart   yes yes yes yes
onshow yes yes yes yes yes
onstalled yes yes yes yes yes
onstorage yes     yes  
onsubmit yes yes yes yes yes
onsuspend yes yes yes yes yes
ontimeupdate yes yes yes yes yes
ontoggle yes yes yes yes yes
ontransitionend yes        
onunload yes     yes  
onvolumechange yes yes yes yes yes
onwaiting yes yes yes yes yes
onwebkitfullscreenchange   yes yes yes yes
onwebkitfullscreenerror   yes yes yes yes
onwebkitanimationend yes        
onwebkitanimationiteration yes        
onwebkitanimationstart yes        
onwebkittransitionend yes        
onwheel yes yes yes yes yes

  chrome瀏覽器的事件基本都都列在上面了,基本上每個事件都有.onxxx屬性,連animationend這樣的HTML5新事件都包含在裏面了,不過需要加webkit前綴。除了一下幾個比較特殊的以外:

  沒有onfocusin,但是支持focusin事件

  沒有onfocusout,但是支持focusout事件

  不支持打印事件:onafterprint、onbeforeprint

  Safari 3.1 到 6.0 版本才支持transitionend事件, 使用webkitTransitionEnd來綁定

  查看事件的具體作用推薦:菜鳥教程HTML DOM事件

 

IE9中所有的onxxx屬性

on事件 window  document  html  body element
onabort  yes yes yes yes yes
onactivate    yes yes yes yes
onafterprint  yes     yes  
onafterupdate    yes yes yes yes
onbeforeactivate    yes yes yes yes
onbeforecopy      yes yes yes
onbeforecut      yes yes yes
onbeforedeactivate    yes yes yes yes
onbeforeeditfocus    yes yes yes yes
onbeforepaste      yes yes yes
onbeforeprint  yes     yes  
onbeforeunload  yes     yes  
onbeforeupdate    yes yes yes yes
onblur  yes yes yes yes yes
oncanplay  yes yes yes yes yes
oncanplaythrough  yes yes yes yes yes
oncellchange    yes yes yes yes
onchange  yes yes yes yes yes
onclick  yes yes yes yes yes
oncontextmenu  yes yes yes yes yes
oncontrolselect    yes yes yes yes
oncopy      yes yes yes
oncut      yes yes yes
ondataavailable    yes yes yes yes
ondatasetchanged    yes yes yes yes
ondatasetcomplete    yes yes yes yes
ondblclick  yes yes yes yes yes
ondeactivate    yes yes yes yes
ondrag  yes yes yes yes yes
ondragend  yes yes yes yes yes
ondragenter  yes yes yes yes yes
ondragleave  yes yes yes yes yes
ondragover  yes yes yes yes yes
ondragstart  yes yes yes yes yes
ondrop  yes yes yes yes yes
ondurationchange  yes yes yes yes yes
onemptied  yes yes yes yes yes
onended  yes yes yes yes yes
onerror  yes yes yes yes yes
onerrorupdate    yes yes yes yes
onfilterchange      yes yes yes
onfocus  yes yes yes yes yes
onfocusin  yes yes yes yes yes
onfocusout  yes yes yes yes yes
onhashchange  yes     yes  
onhelp  yes yes yes yes yes
oninput  yes yes yes yes yes
onkeydown  yes yes yes yes yes
onkeypress  yes yes yes yes yes
onkeyup  yes yes yes yes yes
onlayoutcomplete      yes yes yes
onload  yes yes yes yes yes
onloadeddata  yes yes yes yes yes
onloadedmetadata  yes yes yes yes yes
onloadstart  yes yes yes yes yes
onlosecapture      yes yes yes
onmessage  yes     yes  
onmousedown  yes yes yes yes yes
onmouseenter  yes   yes yes yes
onmouseleave  yes   yes yes yes
onmousemove  yes yes yes yes yes
onmouseout  yes yes yes yes yes
onmouseover  yes yes yes yes yes
onmouseup  yes yes yes yes yes
onmousewheel  yes yes yes yes yes
onmove      yes yes yes
onmoveend      yes yes yes
onmovestart      yes yes yes
onmssitemodejumplistitemremoved  yes      
onmsthumbnailclick    yes      
onoffline  yes     yes  
ononline  yes     yes  
onpaste      yes yes yes
onpause  yes yes yes yes yes
onplay  yes yes yes yes yes
onplaying  yes yes yes yes yes
onprogress  yes yes yes yes yes
onpropertychange    yes yes yes yes
onratechange  yes yes yes yes yes
onreadystatechange  yes yes yes yes yes
onreset  yes yes yes yes yes
onresize  yes yes yes yes yes
onresizeend      yes yes yes
onresizestart      yes yes yes
onrowenter      yes yes yes
onrowexit    yes yes yes yes
onrowsdelete    yes yes yes yes
onrowsinserted    yes yes yes yes
onscroll  yes yes yes yes yes
onseeked  yes yes yes yes yes
onseeking  yes yes yes yes yes
onselect  yes yes yes yes yes
onselectionchange    yes      
onselectstart    yes yes yes yes
onstalled  yes yes yes yes yes
onstop    yes      
onstorage  yes     yes  
onstoragecommit    yes      
onsubmit  yes yes yes yes yes
onsuspend  yes yes yes yes yes
ontimeupdate  yes yes yes yes yes
onunload  yes     yes  
onvolumechange  yes yes yes yes yes
onwaiting  yes yes yes yes yes

  有幾個特殊的情況:

  沒有onpageshow,也不支持該事件,需要IE11+才支持

  沒有onpagehide,也不支持該事件,需要IE11+才支持

  沒有onsearch,IE所有版本都不支持該事件

  沒有onshow,IE所有版本都不支持該事件

  沒有ontoggle,IE所有版本都不支持該事件

  沒有onanimationend,也不支持該動畫事件,需要IE10+才支持

  沒有onanimationiteration,也不支持該動畫事件,需要IE10+才支持

  沒有onanimationstart,也不支持該動畫事件,需要IE10+才支持

  沒有過渡ontransitionend,也不支持過渡事件,需要IE10+才支持

  沒有onwheel,但IE9+支持wheel綁定事件,替代onmousewheel

  沒有onpopstate

 

IE8中所有的onxxx屬性

on事件 window  document  html/script /div/a/ button/ span等普通元素  body form  iframe  style/link textarea  select  input(所有type類型)
onabort                    yes
onactivate    yes yes yes yes yes yes yes yes yes
onafterprint  yes     yes            
onafterupdate  yes yes yes yes yes yes yes yes yes yes
onbeforeactivate    yes yes yes yes yes yes yes yes yes
onbeforecopy      yes yes yes yes yes yes yes yes
onbeforecut      yes yes yes yes yes yes yes yes
onbeforedeactivate    yes yes yes yes yes yes yes yes yes
onbeforeeditfocus    yes yes yes yes yes yes yes yes yes
onbeforepaste      yes yes yes yes yes yes yes yes
onbeforeprint        yes            
onbeforeunload  yes     yes            
onbeforeupdate    yes yes yes yes yes yes yes yes yes
onblur  yes   yes yes yes yes yes yes yes yes
oncellchange    yes yes yes yes yes yes yes yes yes
onchange                yes yes yes
onclick    yes yes yes yes yes yes yes yes yes
oncontextmenu    yes yes yes yes yes yes yes yes yes
oncontrolselect    yes yes yes yes yes yes yes yes yes
oncopy      yes yes yes yes yes yes yes yes
oncut      yes yes yes yes yes yes yes yes
ondataavailable    yes yes yes yes yes yes yes yes yes
ondatasetchanged    yes yes yes yes yes yes yes yes yes
ondatasetcomplete    yes yes yes yes yes yes yes yes yes
ondblclick    yes yes yes yes yes yes yes yes yes
ondeactivate    yes yes yes yes yes yes yes yes yes
ondrag      yes yes yes yes yes yes yes yes
ondragend      yes yes yes yes yes yes yes yes
ondragenter      yes yes yes yes yes yes yes yes
ondragleave      yes yes yes yes yes yes yes yes
ondragover      yes yes yes yes yes yes yes yes
ondragstart    yes yes yes yes yes yes yes yes yes
ondrop      yes yes yes yes yes yes yes yes
onerror              yes     yes
onerrorupdate    yes yes yes yes yes yes yes yes yes
onfilterchange      yes yes yes yes yes yes yes yes
onfocus  yes   yes yes yes yes yes yes yes yes
onfocusin    yes yes yes yes yes yes yes yes yes
onfocusout    yes yes yes yes yes yes yes yes yes
onhashchange  yes     yes            
onhelp  yes yes yes yes yes yes yes yes yes yes
onkeydown    yes yes yes yes yes yes yes yes yes
onkeypress    yes yes yes yes yes yes yes yes yes
onkeyup    yes yes yes yes yes yes yes yes yes
onlayoutcomplete      yes yes yes yes yes yes yes yes
onload  yes     yes   yes yes     yes
onlosecapture      yes yes yes yes yes yes yes yes
onmessage  yes                  
onmousedown    yes yes yes yes yes yes yes yes yes
onmouseenter    yes yes yes yes yes yes yes yes yes
onmouseleave    yes yes yes yes yes yes yes yes yes
onmousemove    yes yes yes yes yes yes yes yes yes
onmouseout    yes yes yes yes yes yes yes yes yes
onmouseover      yes yes yes yes yes yes yes yes
onmouseup      yes yes yes yes yes yes yes yes
onmousewheel    yes yes yes yes yes yes yes yes yes
onmove      yes yes yes yes yes yes yes yes
onmoveend      yes yes yes yes yes yes yes yes
onmovestart      yes yes yes yes yes yes yes yes
onmssitemodejumplistitemremoved  yes                
onmsthumbnailclick    yes                
onoffline        yes            
ononline        yes            
onpage      yes yes yes yes yes yes yes yes
onpaste      yes yes yes yes yes yes yes yes
onpropertychange    yes yes yes yes yes yes yes yes yes
onreadystatechange    yes yes yes yes yes yes yes yes yes
onreset          yes          
onresize  yes   yes yes yes yes yes yes yes yes
onresizeend      yes yes yes yes yes yes yes yes
onresizestart      yes yes yes yes yes yes yes yes
onrowenter    yes yes yes yes yes yes yes yes yes
onrowexit    yes yes yes yes yes yes yes yes yes
onrowsdelete    yes yes yes yes yes yes yes yes yes
onrowsinserted    yes yes yes yes yes yes yes yes yes
onscroll  yes   yes yes yes yes yes yes yes yes
onselect        yes       yes   yes
onselectionchange    yes                
onselectstart    yes yes yes yes yes yes yes yes yes
onstop    yes                
onstorage    yes                
onstoragecommit    yes                
onsubmit          yes          
onunload  yes     yes            

  除了IE9暴露的問題以外還有:

  沒有oninput,也不支持該事件,需要IE9+才支持

  沒有多媒體的onxxx屬性,也不支持所有的多媒體事件(包括oncanplay/oncanplaythrough/ondurationchange/onemptied...),需要IE9+才支持

  

Firefox42.0中所有的onxxx屬性

on事件 window document html body element
onabort yes yes yes yes yes
onafterprint yes     yes  
onbeforeprint yes     yes  
onbeforeunload yes     yes  
onafterscriptexecute   yes      
onbeforescriptexecute   yes      
onblur yes yes yes yes yes
oncanplay yes yes yes yes yes
oncanplaythrough yes yes yes yes yes
onchange yes yes yes yes yes
onclick yes yes yes yes yes
oncontextmenu yes yes yes yes yes
oncopy   yes yes yes yes
oncut   yes yes yes yes
ondblclick yes yes yes yes yes
ondevicelight yes        
ondevicemotion yes        
ondeviceorientation yes        
ondeviceproximity yes        
ondrag yes yes yes yes yes
ondragend yes yes yes yes yes
ondragenter yes yes yes yes yes
ondragleave yes yes yes yes yes
ondragover yes yes yes yes yes
ondragstart yes yes yes yes yes
ondrop yes yes yes yes yes
ondurationchange yes yes yes yes yes
onemptied yes yes yes yes yes
onended yes yes yes yes yes
onerror yes yes yes yes yes
onfocus yes yes yes yes yes
onhashchange yes     yes  
oninput yes yes yes yes yes
oninvalid yes yes yes yes yes
onkeydown yes yes yes yes yes
onkeypress yes yes yes yes yes
onkeyup yes yes yes yes yes
onlanguagechange yes     yes  
onload yes yes yes yes yes
onloadeddata yes yes yes yes yes
onloadedmetadata yes yes yes yes yes
onloadstart yes yes yes yes yes
onmessage yes     yes  
onmousedown yes yes yes yes yes
onmouseenter yes yes yes yes yes
onmouseleave yes yes yes yes yes
onmousemove yes yes yes yes yes
onmouseout yes yes yes yes yes
onmouseover yes yes yes yes yes
onmouseup yes yes yes yes yes
onmozfullscreenchange yes yes yes yes yes
onmozfullscreenerror yes yes yes yes yes
onmozpointerlockchange yes yes yes yes yes
onmozpointerlockerror yes yes yes yes yes
onoffline yes     yes  
ononline yes     yes  
onpagehide yes     yes  
onpageshow yes     yes  
onpaste   yes yes yes yes
onpause yes yes yes yes yes
onplay yes yes yes yes yes
onplaying yes yes yes yes yes
onpopstate yes     yes  
onprogress yes yes yes yes yes
onratechange yes yes yes yes yes
onreadystatechange   yes      
onreset yes yes yes yes yes
onresize yes yes yes yes yes
onscroll yes yes yes yes yes
onseeked yes yes yes yes yes
onseeking yes yes yes yes yes
onselect yes yes yes yes yes
onshow yes yes yes yes yes
onstalled yes yes yes yes yes
onsubmit yes yes yes yes yes
onsuspend yes yes yes yes yes
ontimeupdate yes yes yes yes yes
onunload yes     yes  
onuserproximity yes        
onvolumechange yes yes yes yes yes
onwaiting yes yes yes yes yes
onwheel yes yes yes yes yes

  

  Firefox有幾個比較特殊的地方:  

  沒有onfocusin,也不支持focusin事件

  沒有onfocusout,也不支持focusout事件

  沒有onsearch,也不支持該事件

  沒有onanimationend,但是支持animationend事件

  沒有onanimationiteration,但是支持animationiteration事件

  沒有onanimationstart,但是支持animationstart事件

  沒有ontransitionend,但是支持transitionend事件

  已廢棄onmousewheel

  沒有onstorage

  沒有ontoggle,也不支持toggle事件

 

  到此爲止了,花費的時間不少,算是一個各個瀏覽器差別的筆記,比較粗略,實際上每個瀏覽器不同版本會有一些細微差別,不過有這這個大概的目錄以後會比較容易查找不同。以後項目中如果遇到有onxxx事件綁定的問題有個參考。

 

  如果覺得本文不錯,請點擊右下方【推薦】!

 

發佈了73 篇原創文章 · 獲贊 1 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章