首页 > 代码库 > event
event
1.事件处理
（1）Javascript事件处理器：将一个事件和一个对象与javascript函数关联
例如：
window.onload=init;//窗口的load的事件发生时，init()函数将被调用。
//正规术语：该语句表示为onload事件创建或注册了一个事件监听器，init()函数将作为窗口对象加载事件的事件处理器。
（2）Javascript支持4种不同的事件监听器创建方式。
①嵌套式事件监听器 :(不推荐使用：将javascript分散到html元素各处，代码不美观，而且难以调试和管理项目)
//>>>将javascript函数赋值给HTML元素属性：
<form action="#" method="post" onsubmit="validateForm();">
②传统事件处理
window.onload=init;//init()函数已定义；
或
window.onload=function(){//使用匿名函数
...
}
缺点：这种方法一次只能指定一个事件处理器
例如：
document.getElementById(‘theForm‘).onsubmit=process;
document.getElementById(‘theForm‘).onsubmit=calculate;
//表单提交时，将调用calculate()函数，process处理器被替换，不会执行。
③W3C事件处理 --->>>addEventListener(arg0,arg1,arg2);//arg0:事件类型，arg1:事件发生时调用的函数，arg2:事件阶段的布尔值。
//最后一个参数arg2，可以始终取false或忽略它（导致类似假值的undefined）
---->>>removeEventListener(arg0,arg1,arg2);//移除一个事件监听器；试图删除不存在的事件监听器不会抛出错误；
优点：允许相同元素相同事件指定多个事件处理器。
例如：
obj.addEventListener(‘load‘,process,false);//注意不是onload。
obj.addEventListener(‘load‘,calculate,false);
//使用多次addEventListener（）方法调用，为相同元素的相同事件添加多个事件监听器。
删除对应事件：
obj.removeEventListener(‘load‘,process,false);
obj.removeEventListener(‘load‘,calculate,false);
④IE事件处理器 --->>> attachEvent(arg0,arg1) //第1参数表示事件，第2个参数表示事件发生时调用的函数。
--->>> detachEvent(arg0,arg1) ;//移除对应事件
例如：
obj.attachEvent(‘onload‘,process);//注意第1个参数为:on+事件类型
obj.attachEvent(‘onload‘,calculate);
注意： 针对W3C和IE的不同，可以写一个工具方法，进行统一
//注册事件监听器
function addEvent(obj,type,fn){
if(obj && obj.addEventListener){
obj.addEventListener(type,fn,false);
}else if(obj && obj.attachEvent){
obj.attachEvent(‘on‘+type,fn);
}
}
//移除事件监听器
function removeEvent(obj,type,fn){
if(obj && obj.removeEventListener){
obj.removeEventListener(type,fn,false);
}else if(obj && obj.detachEvent){
obj.detachEvent(‘on‘+type,fn);
}
}
2.高级事件处理
（1）引用事件
为了使得事件处理程序用于多个元素上的相同事件或者相同元素的多个哥事件上，事件处理器必须具有灵活性，
所以，对是事件本身的访问变的相当有用，但访问时间的方式，取决于所用浏览器。
①支持addEventListener()方法的浏览器，事件处理器将自动接收一个参数，该参数代表发生的事件。
我们可以编写自己的处理器接收这一参数。
function someEventHandle(e){
//Use e;
}
②IE8及更早版本，使用attackEvent()注册监听器，使用window对象的event属性
function someEventHandle(){
//Use window.event;
}
为了跨浏览器，我们使用统一这两种方法：
function someEventHandle(e){
if(typeof e==‘undefined‘)e=window.event;//此语句的其他写法：（1）if(!e)e=window.event; （2）e=e||e.window.event;
//use e;
}
注意：不管使用DOM方法还是传统事件处理器，以上方法都是有效的，设置对匿名函数也也一样
someElement.onclick=function(e){
if(!e)e=window.event;
}
但是，如果使用嵌入式事件处理器(最好不用)，就必须将事件明确的传递给函数
如： <a href="http://www.mamicode.com/somepage.html" onclick=‘doSomeThing(event);‘>some link</a>
（2）事件属性
①target，srcElement（用于IE8及更早的版本）:都指向触发事件的HTML元素，（即返回html元素引用对象）
var target=e.target||e.srcElement;
②type:所有浏览器都支持，返回保存刚刚发生的事件类型 （如：submit,click等等）
（3）检查按键
在事件对象中，keyCode和which属性通常代表两个值。但是。。。。为获得更多信息，可以继续查找其他资料
（4）阻止默认事件行为
一般方法：
//阻止表单默认提交，用于传统方法注册事件监听器可靠
function handleForm(){
Do whatever.
if(errors){
return false;//返回false阻止默认浏览器行为
}else{
return true;//false以为的值，允许默认事件行为
}
}
跨浏览器的方式阻止默认行为（如表单提交等）
//非传统方法注册事件监听器时
if(!e)e=window.event;
if(e.preventDefault){//如果不支持addEventListener()
e.preventDefault();
}else{//对于IE9之前版本，设置事件对象的returnValue属性为false
e.returnValue=http://www.mamicode.com/false;
}
return false;//作为额外的预防措施，最后也返回false
（5）阻止事件冒泡
事件的两个阶段：捕捉和冒泡；
但是：focus,blur,change,scroll,submit事件没有冒泡阶段；
默认情况下，所有事件监听器只关注冒泡阶段
//阻止事件冒泡，但是并不经常需要取消事件冒泡
if(e.stopPropogation){//W3C/addEventListener()支持
e.stopPropogation();
}else{
e.cancelBubble=true;//旧版本IE
}
（5）委派事件处理
①我们常用事件处理的方式是：将事件监听器绑定到具体的元素上。
②一宗替代方式，执行事件委派：就是将事件处理器连接到父元素，捕捉从子元素冒泡的任何事件。在多个元素有相同事件处理器的情况下，
委派可以增强性能和简洁代码
event