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]属性。比较典型的例子动画事件

<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的事件属性比较

标签：

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