位置: 编程技术 - 正文
javascript事件绑定学习要点
编辑：rootadmin推荐整理分享javascript事件绑定学习要点，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:,内容如对您有帮助，希望把文章链接给更多的朋友！
事件绑定分为两种：一种是传统事件绑定（内联模型，脚本模型），一种是现代事件绑定（DOM2级模型）。现代事件绑定在传统绑定上提供了更强大更方便的功能。
一 传统事件绑定的问题
传统事件绑定中的内联模型不做讨论，基本很少去用。先来看一下脚本模型，脚本模型将一个函数赋值给一个事件处理函数。传统绑定如：
问题一：一个事件处理函数触发两次事件
如果一个页面有两个或者多个js，并且第一个js是第一个程序开发的，第二个js是第二个程序员开发的。第一个window.onload被覆盖了，如
结果只是打印了 Mr.lee
其实是有办法解决这个问题的，看下面这两种形式。a:
b:
所以解决办法有了。
问题二：事件切换器切换一个id为box的div，让里面的背景red与blue直接切换，并且切换之前弹框一次，如：
上面的代码虽然实现了切换功能，但是弹框只执行了一次。
按照上面的代码出现了注释中的错误，解决的办法如下：
二 W3C事件处理函数addEventListener()与removeEventListener()W3C事件处理函数两个，addEventListener()与removeEventListener()。
//W3C自带的两个添加事件和删除事件1.覆盖问题，解决
2.相同函数屏蔽的问题，解决
3.是否可以传递this，解决例子1：
例子2：
4.添加一个额外的方法，会不会被覆盖，或者只能执行一次，解决
综上所述：W3C是比较完美的解决了这些问题，非常好用，但是IE8和之前的浏览器并不支持，而是采用了自己的事件，当然IE9已经完全支持了W3C的这两个事件处理函数。
W3C可以设置冒泡和捕获方式。
支持W3C标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，基中第3个参数useCapture是一个Boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行。而不兼容W3C的浏览器(IE)用attachEvent()方法，此方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也实现兼容浏览器的效果。
事件捕获阶段：事件从最上一级标签开始往下查找，直到捕获到事件目标(target)。事件冒泡阶段：事件从事件目标(target)开始，往上冒泡直到页面的最上一级标签。事件的传播是可以阻止的：在W3c中，使用stopPropagation()方法在IE下设置cancelBubble = true；
三.IE事件处理函数
attachEvent()和detachEvent()IE实现了与DOM中类似的两个方法：attachEvent()和detachEvent()。这两个方法接受相同的参数：事件名称和函数。
在使用这两组函数的时候，先把区别说一下：1.IE不支持捕获，只支持冒泡；2.IE添加事件不能屏蔽重复的函数；3.IE中的this指向的是window而不是DOM对象。4.在传统事件上，IE是无法接受到event对象的，但使用了attchEvent却可以，但有些区别。
1.覆盖问题,解决了，但有不同，结果是Mrs.Lee，Mr.Lee，最后是Lee
2.相同函数屏蔽的问题，未解决。
3.是否可以传递this,不能，this指的是window。需要用call方法。
下面还有办法就是通过window.event.srcElement。代码如下：
4.添加一个额外的方法，会不会被覆盖，或者只能执行一次，解决。
在传统绑定上，IE是无法像W3C那样通过传参接受event对象，但是使用attachEvent()却可以。
跨浏览器的兼容
跨浏览器添加事件
跨浏览器移除事件
跨浏览器获取目标对象
调用方式：
四.事件对象的其他补充
relatedTarget事件
w3c中的一个relatedTarget事件。例如：
IE提供了两组分别用于移入移出的属性fromElement和toElement,分别对应mouseover和mouseout。
PS:fromElement和toElement如果分别对应相反的鼠标事件，没有任何意义。
剩下要做的就是跨浏览器兼容操作：
屏蔽跳转操作
取消事件的默认行为有一种不规范的做法，就是返回false。
PS:虽然return false；可以实现这个功能，但是有漏洞。第一：必须写到最后，这样导致中奖的代码执行后，有可能执行不到return false;第二:return false 写到最前那么之后的自定义操作就失效了。所以最好的办法应该是在最前面就阻止默认行为，并且后面的代码还可以执行。
那么跨浏览器的兼容：
右键菜单contextmenu兼容：
PS：contextmenu事件很常用，这直接导致浏览器兼容性较为稳定。
卸载前事件：beforeunload这个事件可以帮助在离开本页的时候给出相应的提示，“离开”或者“返回”操作。
鼠标滚轮（mousewheel）和DOMMouseScroll用于获取鼠标上下滚轮的距离
PS：通过浏览器检测可以确定火狐只执行DOMMouseScroll。
DOMContentLoaded事件和readystatechange事件
DOMContentLoaded事件和readystatechange事件，有关DOM加载方面的事件。
javascript中call apply 与 bind方法详解 在JavaScript中，call、apply和bind是Function对象自带的三个方法，本文将通过几个场景的应用，来详细理解三个方法。call()call()方法在使用一个指定的this值和
JavaScript中setTimeout和setInterval函数的传参及调用 如何向setTimeout、setInterval传递参数看如下代码：varstr='aaa';varnum=2;functionauto(num){alert(num);}setTimeout('auto(num)',);这样写是可以正常工作的，但是如其说这
举例说明JavaScript中的实例对象与原型对象 首先声明：javascript中每个对象都有一个constructor属性和一个prototype属性。constructor指向对象的构造函数，prototype指向使用构造函数创建的对象实例的原型
上一篇：javascript创建对象、对象继承的实用方式详解(js创建对象的方法有哪些)
