搜索
首页web前端html教程window、document、html、body、element的事件属性比较_html/css_WEB-ITnose

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

<br /><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("<strong>animationstart</strong>", myStartFunction);x.addEventListener("<strong>animationiteration</strong>", myIterationFunction);x.addEventListener("<strong>animationend</strong>", 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
声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?公众号网页更新缓存难题:如何避免版本更新后旧缓存影响用户体验?Mar 04, 2025 pm 12:32 PM

公众号网页更新缓存,这玩意儿,说简单也简单,说复杂也够你喝一壶的。你辛辛苦苦更新了公众号文章,结果用户打开还是老版本,这滋味,谁受得了?这篇文章,咱就来扒一扒这背后的弯弯绕绕,以及如何优雅地解决这个问题。读完之后,你就能轻松应对各种缓存难题,让你的用户始终体验到最新鲜的内容。先说点基础的。网页缓存,说白了就是浏览器或者服务器为了提高访问速度,把一些静态资源(比如图片、CSS、JS)或者页面内容存储起来。下次访问时,直接从缓存里取,不用再重新下载,速度自然快。但这玩意儿,也是个双刃剑。新版本上线,

如何使用HTML5表单验证属性来验证用户输入?如何使用HTML5表单验证属性来验证用户输入?Mar 17, 2025 pm 12:27 PM

本文讨论了使用HTML5表单验证属性,例如必需的,图案,最小,最大和长度限制,以直接在浏览器中验证用户输入。

HTML5中跨浏览器兼容性的最佳实践是什么?HTML5中跨浏览器兼容性的最佳实践是什么?Mar 17, 2025 pm 12:20 PM

文章讨论了确保HTML5跨浏览器兼容性的最佳实践,重点是特征检测,进行性增强和测试方法。

如何高效地在网页中为PNG图片添加描边效果?如何高效地在网页中为PNG图片添加描边效果?Mar 04, 2025 pm 02:39 PM

本文展示了使用CSS为网页中添加有效的PNG边框。 它认为,与JavaScript或库相比,CSS提供了出色的性能,详细介绍了如何调整边界宽度,样式和颜色以获得微妙或突出的效果

&lt; datalist&gt;的目的是什么。 元素?&lt; datalist&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:33 PM

本文讨论了html&lt; datalist&gt;元素,通过提供自动完整建议,改善用户体验并减少错误来增强表格。Character计数:159

&gt; gt;的目的是什么 元素?&gt; gt;的目的是什么 元素?Mar 21, 2025 pm 12:34 PM

本文讨论了HTML&lt; Progress&gt;元素,其目的,样式和与&lt; meter&gt;元素。主要重点是使用&lt; progress&gt;为了完成任务和LT;仪表&gt;对于stati

我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?我如何使用html5&lt; time&gt; 元素以语义表示日期和时间?Mar 12, 2025 pm 04:05 PM

本文解释了HTML5&lt; time&gt;语义日期/时间表示的元素。 它强调了DateTime属性对机器可读性(ISO 8601格式)的重要性,并在人类可读文本旁边,增强Accessibilit

&lt; meter&gt;的目的是什么。 元素?&lt; meter&gt;的目的是什么。 元素?Mar 21, 2025 pm 12:35 PM

本文讨论了HTML&lt; meter&gt;元素,用于在一个范围内显示标量或分数值及其在Web开发中的常见应用。它区分了&lt; meter&gt;从&lt; progress&gt;和前

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),