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属性

　　chrome浏览器的事件基本都都列在上面了，基本上每个事件都有.onxxx属性，连animationend这样的HTML5新事件都包含在里面了，不过需要加webkit前缀。除了一下几个比较特殊的以外：

　　没有onfocusin，但是支持focusin事件

　　没有onfocusout，但是支持focusout事件

　　不支持打印事件:onafterprint、onbeforeprint

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

　　查看事件的具体作用推荐：菜鸟教程HTML DOM事件

IE9中所有的onxxx属性

　　有几个特殊的情况：

　　没有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属性

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

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

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

Firefox42.0中所有的onxxx属性

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

　　没有onfocusin，也不支持focusin事件

　　没有onfocusout，也不支持focusout事件

　　没有onsearch,也不支持该事件

　　没有onanimationend，但是支持animationend事件

　　没有onanimationiteration，但是支持animationiteration事件

　　没有onanimationstart，但是支持animationstart事件

　　没有ontransitionend，但是支持transitionend事件

　　已废弃onmousewheel

　　没有onstorage

　　没有ontoggle，也不支持toggle事件

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

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

原标题：window、document、html、body、element的事件属性比较

关键词：HTML