js_事件小结

1 事件：js和html的交互是通过事件实现的。

（1）事件流的是从页面中接收事件的顺序，但是：IE的事件流叫事件冒泡，Netscape提出的是事件捕获。由于老版本的浏览器不支持事件捕获，我们也建议读者放心使用事件冒泡，在有特殊需要的时候再使用事件捕获。另外还有“DOM2级事件”--DOM事件流：包括事件捕获阶段，处于目标阶段和事件冒泡阶段。

（2）事件处理程序（事件监听器）：

1--HTML事件处理程序：即我们直接在HTML代码中添加事件处理程序，如下面这段代码：

<input id="btn1" value="按钮" type="button" οnclick="showmsg();">

特点：html代码和js的耦合性太强

2--DOM0级事件处理程序：即为指定对象添加事件处理，看下面的一段代码

<input id="btn2" value="按钮" type="button">
　　<script>
　　　 var btn2= document.getElementById("btn2");
　　    btn2.οnclick=function(){
　　　　　　alert("DOM0级添加事件处理");
　　　　} 
　　　　btn.οnclick=null;//如果想要删除btn2的点击事件，将其置为null即可
　　</script> 

特点：相对于HTML事件处理程序，DOM0级事件html代码和js代码的耦合性已经大大降低。

3--DOM2级事件处理程序：DOM2也是对特定的对象添加事件处理程序，但是主要涉及到两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()和removeEventListener()。它们都接收三个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值（是否在捕获阶段处理事件），看下面的一段代码：

<input id="btn3" value="按钮" type="button">
　　<script>
　　   var btn3=document.getElementById("btn3");
　　   btn3.addEventListener("click",showmsg,false);//这里我们把最后一个值置为false，即不在捕获阶段处理，一般来说冒泡处理在各浏览器中兼容性较好
　　   function showmsg(){
　　       alert("DOM2级添加事件处理程序");
　　   }
　　   btn3.removeEventListener("click",showmsg,false);//如果想要把这个事件删除，只需要传入同样的参数即可
　　</script>

特点：添加删除事件处理的时候，该方法更直接简便。但在删除事件处理的时候，传入的参数一定要跟之前的参数一致，否则删除会失效！例如，如果添加时是匿名函数，则无法删除。

4--IE事件处理程序：IE实现了与DOM中类似的两个方法:attachEvent()和detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称和事件处理程序函数。由于IE只支持时间冒泡，所有通过attachEvent()添加的事件处理程序都会被添加包冒泡阶段。 

var btn=document.getElementById("mybtn"); 
btn.attachEvent("onclick",function(){ 
alert("clicked"); 
}); 
btn.attachEvent("onclick",function(){ 
alert("hello world!"); 
}); 

这里调用了两次attachEvent(),为同一个按钮添加了两个不同的事件处理程序。不过，与DOM方法不同的是，这些事件处理程序不是以它们的添加顺序执行，而是以相反的顺序被触发。单击这个例子中的按钮：首先看到的是"hello world",然后才是"clicked". 

btn.detachEvent("onclick",hander}); //移除

5--跨浏览器事件处理程序：这里提供一个EventUtil对象,可以用这个对象来处理浏览期间的差异

var EventUtil = { 
addHandler: function(element, type, handler){ // 该方法接受3个参数：要操作的元素，事件名称和事件处理程序函数 
if (element.addEventListener){ //检查传入的元素是否存在DOM2级方法 
element.addEventListener(type, handler, false); // 若存在，则使用该方法 
} else if (element.addEvent){ // 如果存在的是IE的方法 
element.attachEvent("on" + type, handler); //则使用IE的方法，注意，这里的事件类型必须加上"on"前缀。 
} else { // 最后一种可能是使用DOM0级 
element["on" + type] = hander; 
} 
}, 
removeHandler: function(element, type, handler){ // 该方法是删除之前添加的事件处理程序 
if (element.removeEventListener){ //检查传入的元素是否存在DOM2级方法 
element.removeEventListener(type, handler, false); // 若存在，则使用该方法 
} else if (element.detachEvent){ // 如果存在的是IE的方法 
element.detachEvent("on" + type, handler); //则使用IE的方法，注意，这里的事件类型必须加上"on"前缀。 
} else { // 最后一种可能是使用DOM0及方法(在现代浏览器中，应该不会执行这里的代码) 
element["on" + type] = null; 
} 
} 
};

var btn =document.getElementById("mybtn");//使用
var hander= function(){ 
alert("clicked"); 
}; 
//这里省略了部分代码 
EventUtil.addHandler(btn,"click",hander); 
//这里省略了部分代码 
EventUtil.removeHandler(btn,"click",hander); //移除之前添加的事件处理程序  

 （3）事件对象：触发DOM上某个事件时，会产生一个事件对象event,这个对象包含着所有与事件有关的信息

具体而言，又分为DOM中的事件对象和IE中的事件对象

事件对象：（DOM）event,（IE）window.event

事件的目标：（DOM）target,（IE）srcElement

跨浏览器事件对象：

var eventUtil = { 
getEvent : function(event){ 
return event ? event : window.event; 
}; 
getTarget : function(event){ 
return event.target || event.srcElement; 
}; 
preventDefault : function(event){ //取消事件默认行为
if(event.preventDefault){ 
event.preventDefault(); 
}else{ 
event.returnValue = false; 
} 
}; 
stopPropagation : function(event){ //取消事件进一步冒泡
if(event.stopPropagation){ 
event.stopPropagation(); 
}else{ 
event.cancelBubble = true; 
} 
}; 
}; 

2 事件委托：对“事件处理程序过多”问题的解决方案。利用事件冒泡，指定一个事件处理程序，可以管理某一类型的事件。

优点：（1）document对象很快就可以访问到；（2）在页面中设置事件处理程序所需的时间更少；（3）整个页面占用的内存空间更少，提升整体性能（每个函数都是对象，都会占用内存，内存中对象越多，性能就会越差）