zoukankan      html  css  js  c++  java
  • 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事件绑定的问题有个参考。

  • 相关阅读:
    美国大学排名之本科中最用功的学校top15
    PhpStorm (强大的PHP开发环境)2017.3.2 附注册方法
    获取地址栏的URL: PHP JS
    怎么给php下拉框默认选中
    在JS中使用全局变量
    原生和jQuery的ajax用法
    XAMPP重要文件目录及配置
    select获取下拉框的值 下拉框默认选中
    h5 时间控件问题,怎么设置type =datetime-local 的值
    JS截取字符串常用方法详细整理
  • 原文地址:https://www.cnblogs.com/chuaWeb/p/5028651.html
Copyright © 2011-2022 走看看