[js]事件综合 整理

原文链接：http://www.cnblogs.com/xxcanghai/p/5205998.html

事件流：页面接收事件的顺序，IE提出了事件冒泡流，Netscape提出了事件捕获流。

事件冒泡：事件由最具体（dom中层次最深的节点）的接收对象向上进行传播到较为不具体的元素

事件捕获：事件由不具体的元素接收向下传播到具体的元素

DOM事件流：事件捕获阶段、处于目标阶段和事件冒泡阶段

一、事件处理程序

1、HTML事件处理程序

<input type="button" id="btn" onclick="alert(event.type)" value="点击我">

2、DOM0级事件处理

var btn=document.getElementById("btn");

btn.onclick = function(){
    alert("123");　　alert(this);//btn元素，只在btn元素的作用域内进行
}移除btn.onclick = null;

1. 传统绑定的优点
   • 非常简单和稳定，可以确保它在你使用的不同浏览器中运作一致
   • 处理事件时，this关键字引用的是当前元素，这很有帮组
2. 传统绑定的缺点 
   • 传统方法只会在事件冒泡中运行，而非捕获和冒泡
   • 一个元素一次只能绑定一个事件处理函数。新绑定的事件处理函数会覆盖旧的事件处理函数
   • 事件对象参数(e)仅非IE浏览器及ie9以上（包括ie9）可用

3、Dom2级事件处理

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){
  alert("123");
},false)//false代表冒泡阶段 ie8之前的版本都是只支持事件冒泡，为了更好的兼容性最好选择事件冒泡，设置false//除非需要进行事件捕获的时候设置成true

添加多个事件

btn.addEventListener("click",function(){
  alert("123");
},false)

btn.addEventListener("click",function(){
  alert("aaa");
},false)执行顺序是先弹出123，再弹出aaa

移除:移除时要用removeEventListener()，传入的参数和绑定时传入的参数一致，注意传入匿名函数是不行的btn.removeEventListener("click",function(){　　alert("123");},false)//不管用

var fun = function(){　　alert("123");}btn.addEventListener("click",fun,false);btn.removeEventListener("click",fun,false);//管用

1. W3C绑定的优点W3C绑定的缺点
   • 该方法同时支持事件处理的捕获和冒泡阶段。事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)。
   • 在事件处理函数内部，this关键字引用当前元素。
   • 事件对象总是可以通过处理函数的第一个参数(e)捕获。
   • 可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件
• IE不支持，你必须使用IE的attachEvent函数替代。

4、IE事件处理程序

var btn = document.getElementById("btn");
btn.attachEvent("onclick",function(){//onclick,并不是DOM2级时的click
   alert("123");
   alert("this"); //window,在全局的作用域下进行
});

添加多个事件时

btn.attachEvent("onclick",function(){
   alert("123");
});

btn.attachEvent("onclick",function(){
   alert("aaa");
});

执行顺序正和DOM2级相反，先弹出aaa,再弹出123

移除事件

var btn = document.getElementById("btn");var fun = function(){alert("123");}

btn.attachEvent("onclick",fun});

btn.detachEvent("onclick",fun);与DOM2级相同，不能传入匿名函数

1. IE方式的优点IE方式的缺点
   • 可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件。
• IE仅支持事件捕获的冒泡阶段
• 事件监听函数内的this关键字指向了window对象，而不是当前元素（IE的一个巨大缺点）
• 事件对象仅存在与window.event参数中
• 事件必须以ontype的形式命名，比如，onclick而非click
• 仅IE可用。你必须在非IE浏览器中使用W3C的addEventListene

二、事件对象

1、Dom中的事件对象

兼容Dom的浏览器会将event对象传入到事件处理程序中，无论使用的是Html、DOM0、DOM2级都会传入event对象

<input type="button" id="btn" onclick="alert(event.type)" value="点击我">//click

var btn = document.getElementById("btn");btn.onclick = function(){　　alert(event.type);//click}btn.addEventListener("click",function(){　　alert(event.type);//click});

event对象的属性和方法

　　

bubbles               boolean         只读          是否为冒泡cancelable            boolean         只读          是否可以取消事件的默认行为currentTarget         element         只读          当前正在处理事件的那个元素defaultPrevented      Boolean         只读          为true时表示已经调用的preventDefault()eventPhase            integer         只读          表示事件阶段，1：捕获阶段 2：目标阶段 3：冒泡阶段preventDefault()      function        只读          取消事件的默认行为，如果cancelable为true时可以使用此方法stopPropagation()     function        只读          取消事件的进一步冒泡或捕获，当bubbles为true时可以使用此方法target                element         只读          事件的目标type                  String          只读          事件的类型

事件处理程序中的this、event.currentTarget、event.target的关系

在事件内部，this会一直等于event.currentTarget，然而event.target是事件的实际目标

var btn = docuemtn.getElementById("btn");
btn.onclick = function(){
     console.log(this);//btn       　console.log(event.currentTarget);//btn　console.log(event.target)//btn}

body.onclick = function(){
     console.log(this);//body       　console.log(event.currentTarget);//body　console.log(event.target)//btn}因为事件处理程序是注册到body上面的，所以this和event.currentTarget都是body,btn是click事件真正的目标，所以target为btn点击btn时，因为事件没有注册到btn上，所以事件冒泡到body上。

阻止事件默认行为

<a href="http://www.baidu.com" id="myLink">百度</a>var link = document.getElementById("myLink");link.onclick = function(event){　　event.preventDefault();}//阻止了a的链接跳转行为

取消事件进一步的冒泡或者捕获btn.onclick = function(event){　　alert("123");　　event.stopPropagation();}body.onclick = function(event){　　alert("aaa");}如果没有阻止事件冒泡的话，点击body会弹出2个提示框

event.eventPhase

body.addEventListener("click",function(event){
   alert(event.eventPhase);//1捕获阶段
},true)btn.onclick = function(event){　　alert(event.eventPhase);//2 目标阶段}body.onclick = function(){　　alert(event.eventPhase);//3 冒泡阶段}

2、IE中的事件对象

btn.onclick = function(event){
    alert(window.event.type);//click  在IE下如果使用dom0级事件，其中event对象是作为window的一个属性存在，window.event}btn.attachEvent("onclick",function(event){　　alert(event.type);//click 但是如果使用attachEvent注册事件时，会将event对象传入到事件处理函数中 window.event也可以访问到});

IE下event的属性及方法

cancelBubble      Boolean    读/写        默认值为false,设为true可以取消事件冒泡，与DOM中的stopPropagation()相同returnValue       Boolean    读/写        默认为true ,设为false时可以取消事件的默认行为，与DOM中的preventDefaule()相同srcElement        element    读           事件的目标，与DOM中的target相同type              string     读           被触发的事件类型　　　　

三、适应各种浏览器的事件

var event = {　　addEvent : function(element,type,fun){　　　　if(element.addEventListener){　　　　　　element.addEventListener(type,fun);//dom2级　　　　}else if(element.attachEvent){　　　　　　element.attachEvent("on"+type,fun);//ie　　　　}else{　　　　　　element["on"+type] = fun;//dom0级　　　　}　　},　　removeEvent : function(element,type,fun){　　　　if(element.removeEventListener){　　　　　　element.removeEventLister(type,fun);　　　　}else if(element.detachEvent){　　　　　　element.detachEvent("on"+type,fun);　　　　}else{　　　　　　element["on"+type] = null;　　　　}　　}，　　getEvent : function(event){　　　　return event ? event : window.event; 　　},　　getTarget : function(event){　　　　return event.target || event.srcElement  　　},　　preventDefalut : function(event){　　　event.preventDefalut ? event.preventDefalut() : event.returnValue = false;　　},　　stopPropagation : function(event){　　　　event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;　　}}

3、事件的代理/委托的原理以及优缺点，这是靠事件的冒泡机制来实现的

　　(1)、可以大量节省内存占用，减少事件注册，比如在table上代理所有td的click事件就非常棒

　　(2)、可以实现当新增子对象时无需再次对其绑定事件，对于动态内容部分尤为合适

那么极有可能要求让你【实现事件模型】，即写一个类或是一个模块，有两个函数，

一个bind一个trigger，分别实现绑定事件和触发事件，

核心需求就是可以对某一个事件名称绑定多个事件响应函数，

然后触发这个事件名称时，依次按绑定顺序触发相应的响应函数。