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;
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事件绑定的问题有个参考。

原文地址:https://www.cnblogs.com/chuaWeb/p/5028651.html