你的位置:首页 > 网页设计

[网页设计]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事件windowdocumenthtmlbodyelement
onabortyesyesyesyesyes
onanimationendyes    
onanimationiterationyes    
onanimationstartyes    
onautocompleteyesyesyesyesyes
onautocompleteerroryesyesyesyesyes
onbeforeunloadyes  yes 
onbeforecopy yesyesyesyes
onbeforecut yesyesyesyes
onbeforepaste yesyesyesyes
onbluryesyesyesyesyes
oncancelyesyesyesyesyes
oncanplayyesyesyesyesyes
oncanplaythroughyesyesyesyesyes
onchangeyesyesyesyesyes
onclickyesyesyesyesyes
oncloseyesyesyesyesyes
oncontextmenuyesyesyesyesyes
oncuechangeyesyesyesyesyes
ondblclickyesyesyesyesyes
ondevicemotionyesyesyesyesyes
ondeviceorientationyesyesyesyesyes
ondragyesyesyesyesyes
ondragendyesyesyesyesyes
ondragenteryesyesyesyesyes
ondragleaveyesyesyesyesyes
ondragoveryesyesyesyesyes
ondragstartyesyesyesyesyes
ondropyesyesyesyesyes
ondurationchangeyesyesyesyesyes
onemptiedyesyesyesyesyes
onendedyesyesyesyesyes
onerroryesyesyesyesyes
onfocusyesyesyesyesyes
onhashchangeyes  yes 
oninputyesyesyesyesyes
oninvalidyesyesyesyesyes
onkeydownyesyesyesyesyes
onkeypressyesyesyesyesyes
onkeyupyesyesyesyesyes
onlanguagechangeyes  yes 
onloadyesyesyesyesyes
onloadeddatayesyesyesyesyes
onloadedmetadatayesyesyesyesyes
onloadstartyesyesyesyesyes
onmessageyes  yes 
onmousedownyesyesyesyesyes
onmouseenteryesyesyesyesyes
onmouseleaveyesyesyesyesyes
onmousemoveyesyesyesyesyes
onmouseoutyesyesyesyesyes
onmouseoveryesyesyesyesyes
onmouseupyesyesyesyesyes
onmousewheel(不推荐,用onwheel替代)yesyesyesyesyes
onofflineyes  yes 
ononlineyes  yes 
onpagehideyes  yes 
onpageshowyes  yes 
onpaste yesyesyesyes
onpauseyesyesyesyesyes
onplayyesyesyesyesyes
onplayingyesyesyesyesyes
onpopstateyes  yes 
onpointerlockchange yes   
onpointerlockerror yes   
onprogressyesyesyesyesyes
onratechangeyesyesyesyesyes
onreadystatechange yes   
onresetyesyesyesyesyes
onresizeyesyesyesyesyes
onscrollyesyesyesyesyes
onsearchyesyesyesyesyes
onseekedyesyesyesyesyes
onseekingyesyesyesyesyes
onselectyesyesyesyesyes
onselectionchange yes   
onselectstart yesyesyesyes
onshowyesyesyesyesyes
onstalledyesyesyesyesyes
onstorageyes  yes 
onsubmityesyesyesyesyes
onsuspendyesyesyesyesyes
ontimeupdateyesyesyesyesyes
ontoggleyesyesyesyesyes
ontransitionendyes    
onunloadyes  yes 
onvolumechangeyesyesyesyesyes
onwaitingyesyesyesyesyes
onwebkitfullscreenchange yesyesyesyes
onwebkitfullscreenerror yesyesyesyes
onwebkitanimationendyes    
onwebkitanimationiterationyes    
onwebkitanimationstartyes    
onwebkittransitionendyes    
onwheelyesyesyesyesyes

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

  有几个特殊的情况:

  没有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等普通元素 bodyform iframe style/linktextarea select input(所有type类型)
onabort          yes
onactivate  yesyesyesyesyesyesyesyesyes
onafterprint yes  yes      
onafterupdate yesyesyesyesyesyesyesyesyesyes
onbeforeactivate  yesyesyesyesyesyesyesyesyes
onbeforecopy   yesyesyesyesyesyesyesyes
onbeforecut   yesyesyesyesyesyesyesyes
onbeforedeactivate  yesyesyesyesyesyesyesyesyes
onbeforeeditfocus  yesyesyesyesyesyesyesyesyes
onbeforepaste   yesyesyesyesyesyesyesyes
onbeforeprint    yes      
onbeforeunload yes  yes      
onbeforeupdate  yesyesyesyesyesyesyesyesyes
onblur yes yesyesyesyesyesyesyesyes
oncellchange  yesyesyesyesyesyesyesyesyes
onchange        yesyesyes
onclick  yesyesyesyesyesyesyesyesyes
oncontextmenu  yesyesyesyesyesyesyesyesyes
oncontrolselect  yesyesyesyesyesyesyesyesyes
oncopy   yesyesyesyesyesyesyesyes
oncut   yesyesyesyesyesyesyesyes
ondataavailable  yesyesyesyesyesyesyesyesyes
ondatasetchanged  yesyesyesyesyesyesyesyesyes
ondatasetcomplete  yesyesyesyesyesyesyesyesyes
ondblclick  yesyesyesyesyesyesyesyesyes
ondeactivate  yesyesyesyesyesyesyesyesyes
ondrag   yesyesyesyesyesyesyesyes
ondragend   yesyesyesyesyesyesyesyes
ondragenter   yesyesyesyesyesyesyesyes
ondragleave   yesyesyesyesyesyesyesyes
ondragover   yesyesyesyesyesyesyesyes
ondragstart  yesyesyesyesyesyesyesyesyes
ondrop   yesyesyesyesyesyesyesyes
onerror       yes  yes
onerrorupdate  yesyesyesyesyesyesyesyesyes
onfilterchange   yesyesyesyesyesyesyesyes
onfocus yes yesyesyesyesyesyesyesyes
onfocusin  yesyesyesyesyesyesyesyesyes
onfocusout  yesyesyesyesyesyesyesyesyes
onhashchange yes  yes      
onhelp yesyesyesyesyesyesyesyesyesyes
onkeydown  yesyesyesyesyesyesyesyesyes
onkeypress  yesyesyesyesyesyesyesyesyes
onkeyup  yesyesyesyesyesyesyesyesyes
onlayoutcomplete   yesyesyesyesyesyesyesyes
onload yes  yes yesyes  yes
onlosecapture   yesyesyesyesyesyesyesyes
onmessage yes         
onmousedown  yesyesyesyesyesyesyesyesyes
onmouseenter  yesyesyesyesyesyesyesyesyes
onmouseleave  yesyesyesyesyesyesyesyesyes
onmousemove  yesyesyesyesyesyesyesyesyes
onmouseout  yesyesyesyesyesyesyesyesyes
onmouseover   yesyesyesyesyesyesyesyes
onmouseup   yesyesyesyesyesyesyesyes
onmousewheel  yesyesyesyesyesyesyesyesyes
onmove   yesyesyesyesyesyesyesyes
onmoveend   yesyesyesyesyesyesyesyes
onmovestart   yesyesyesyesyesyesyesyes
onmssitemodejumplistitemremoved yes        
onmsthumbnailclick  yes        
onoffline    yes      
ononline    yes      
onpage   yesyesyesyesyesyesyesyes
onpaste   yesyesyesyesyesyesyesyes
onpropertychange  yesyesyesyesyesyesyesyesyes
onreadystatechange  yesyesyesyesyesyesyesyesyes
onreset     yes     
onresize yes yesyesyesyesyesyesyesyes
onresizeend   yesyesyesyesyesyesyesyes
onresizestart   yesyesyesyesyesyesyesyes
onrowenter  yesyesyesyesyesyesyesyesyes
onrowexit  yesyesyesyesyesyesyesyesyes
onrowsdelete  yesyesyesyesyesyesyesyesyes
onrowsinserted  yesyesyesyesyesyesyesyesyes
onscroll yes yesyesyesyesyesyesyesyes
onselect    yes   yes yes
onselectionchange  yes        
onselectstart  yesyesyesyesyesyesyesyesyes
onstop  yes        
onstorage  yes        
onstoragecommit  yes        
onsubmit     yes     
onunload yes  yes      

  除了IE9暴露的问题以外还有:

  没有oninput,也不支持该事件,需要IE9+才支持

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

  

Firefox42.0中所有的onxxx属性

on事件windowdocumenthtmlbodyelement
onabortyesyesyesyesyes
onafterprintyes  yes 
onbeforeprintyes  yes 
onbeforeunloadyes  yes 
onafterscriptexecute yes   
onbeforescriptexecute yes   
onbluryesyesyesyesyes
oncanplayyesyesyesyesyes
oncanplaythroughyesyesyesyesyes
onchangeyesyesyesyesyes
onclickyesyesyesyesyes
oncontextmenuyesyesyesyesyes
oncopy yesyesyesyes
oncut yesyesyesyes
ondblclickyesyesyesyesyes
ondevicelightyes    
ondevicemotionyes    
ondeviceorientationyes    
ondeviceproximityyes    
ondragyesyesyesyesyes
ondragendyesyesyesyesyes
ondragenteryesyesyesyesyes
ondragleaveyesyesyesyesyes
ondragoveryesyesyesyesyes
ondragstartyesyesyesyesyes
ondropyesyesyesyesyes
ondurationchangeyesyesyesyesyes
onemptiedyesyesyesyesyes
onendedyesyesyesyesyes
onerroryesyesyesyesyes
onfocusyesyesyesyesyes
onhashchangeyes  yes 
oninputyesyesyesyesyes
oninvalidyesyesyesyesyes
onkeydownyesyesyesyesyes
onkeypressyesyesyesyesyes
onkeyupyesyesyesyesyes
onlanguagechangeyes  yes 
onloadyesyesyesyesyes
onloadeddatayesyesyesyesyes
onloadedmetadatayesyesyesyesyes
onloadstartyesyesyesyesyes
onmessageyes  yes 
onmousedownyesyesyesyesyes
onmouseenteryesyesyesyesyes
onmouseleaveyesyesyesyesyes
onmousemoveyesyesyesyesyes
onmouseoutyesyesyesyesyes
onmouseoveryesyesyesyesyes
onmouseupyesyesyesyesyes
onmozfullscreenchangeyesyesyesyesyes
onmozfullscreenerroryesyesyesyesyes
onmozpointerlockchangeyesyesyesyesyes
onmozpointerlockerroryesyesyesyesyes
onofflineyes  yes 
ononlineyes  yes 
onpagehideyes  yes 
onpageshowyes  yes 
onpaste yesyesyesyes
onpauseyesyesyesyesyes
onplayyesyesyesyesyes
onplayingyesyesyesyesyes
onpopstateyes  yes 
onprogressyesyesyesyesyes
onratechangeyesyesyesyesyes
onreadystatechange yes   
onresetyesyesyesyesyes
onresizeyesyesyesyesyes
onscrollyesyesyesyesyes
onseekedyesyesyesyesyes
onseekingyesyesyesyesyes
onselectyesyesyesyesyes
onshowyesyesyesyesyes
onstalledyesyesyesyesyes
onsubmityesyesyesyesyes
onsuspendyesyesyesyesyes
ontimeupdateyesyesyesyesyes
onunloadyes  yes 
onuserproximityyes    
onvolumechangeyesyesyesyesyes
onwaitingyesyesyesyesyes
onwheelyesyesyesyesyes

  

  Firefox有几个比较特殊的地方:  

  没有onfocusin,也不支持focusin事件

  没有onfocusout,也不支持focusout事件

  没有onsearch,也不支持该事件

  没有onanimationend,但是支持animationend事件

  没有onanimationiteration,但是支持animationiteration事件

  没有onanimationstart,但是支持animationstart事件

  没有ontransitionend,但是支持transitionend事件

  已废弃onmousewheel

  没有onstorage

  没有ontoggle,也不支持toggle事件

 

  到此为止了,花费的时间不少,算是一个各个浏览器差别的笔记,比较粗略,实际上每个浏览器不同版本会有一些细微差别,不过有这这个大概的目录以后会比较容易查找不同。以后项目中如果遇到有onxxx事件绑定的问题有个参考。

 

  如果觉得本文不错,请点击右下方【推荐】!