首页 > 代码库 > 了解javascript中的事件（二）
了解javascript中的事件（二）
零、寒暄
这篇博客本该出现在两个月以前，但是种种原因，搁浅了。两个月的时间，改变了许多人也改变了许多事，回头看看自己两个月前写的代码，居然有很多可笑之处，这也算是一种成长吧。实习的几个月里，全身心的投入工作，效率奇高，同时，离开学校的这段日子让我充分感受了这个社会的残酷。好酒需陈酿，来的早不如来的巧，今天跟大家分享下javascript中事件的下半部分。
如需查看本文的上一篇，请猛击了解javascript中的事件（一），注：后文如无特殊说明，提到的参考之前的博客，也是指这篇文章。
本文主要谈一下几个部分：
（1）事件的分类
（2）事件代理
（3）以及事件代理思想的用处
一、事件的分类
上一篇博客中说到了事件的处理程序有三种类型：分别是HTML级事件处理程序、DOM0级事件处理程序、DOM2级事件处理程序。事件的处理当然与事件的来源分不开，现在我们说下事件有哪些类型。
随着HMTL5的推广以及移动设备的普及，浏览器所支持的事件类型和事件数量在不断的增长。简单的来说，事件大致可以分为以下几类：
（1）依托于输入设备而产生的事件
比如键盘事件和鼠标事件：“mouseover”、“mouseenter”、“mouseleave”、“mousedown”、“keydown”、“keypress”，当然还有一些是和触摸相关的，比如“touchmove”、“touchstart”、“touchend”。对于“click”事件，我觉得还是归于输入设备类比较好点，因为终究还是由输入设备产生的。另外还有一些比较特殊的事件：比如苹果safari中的orientationchange，是手机用户在横向模式和纵向模式下产生的事件。
PS：说到手机端的一些事件，有些小激动。因为公司实习的时候是在手机部门，对于移动端的问题，有一些了解。有时间了跟大家分享下手机端前端开发自己的一些理解，会涉及到手机端上下滑动以及各种特效。想想还有些开心，哈哈！
（2）用户界面事件
一般来说，用户界面就是待操作模块和用户产生的交互。比较常见的就是input框的获得焦点focus事件，失去焦点的blur事件。改变表单元素是值“change”事件，以及提交和取消的“submit”、“reset”。
（3）HTML5特定API
HTML5带来了新的元素和功能，比如视音频元素，<video>和<audio>，他们定义了“waiting”、“playing”等等。同样还有拖放的API，比如“dragstart”、“dragover”等等。
（4）状态变化事件
比如AJAX中的“readystatechange”事件，HTML5中离线应用，“online”、“offline”。当然比较重要的一个是window对象的load事件，当文档和页面中的图片等元素均加载完毕后产生的事件，与之类似的，还有一个“DOMContentLoaded”，当DOM准备就绪产生的事件。
其实在平时的开发中，大家使用比较多的事件也就那么一些，将这些归类整理主要是希望自己对事件的分类能有一个直观的认识。
二、事件代理
1.问题引出
平日里，一提到web前端，大家都比较关注“优化”这个关键字。其中关于优化的方案中，经常提到两点：（1）减少对于DOM节点的操作（2）减少不必要的内存的消耗。今天我们提到的事件代理会在这两个方面有出色表现。
先看下面一个例子，有一个分类列表，需要鼠标停在类别上面的时候显示出这个类别下的子类，简要的代码如下：
//html结构<ul class="typeList"> <li id="type1"><a href="http://www.mamicode.com/#">食品</a></li> <li id="type2"><a href="http://www.mamicode.com/#">服饰</a></li> <li id="type3"><a href="http://www.mamicode.com/#">居家</a></li> <li id="type4"><a href="http://www.mamicode.com/#">数码</a></li></ul>//js代码 var type1=document.getElementById("type1"); var type2=document.getElementById("type2"); var type3=document.getElementById("type3"); var type4=document.getElementById("type4"); //这里暂时不考虑兼容性 type1.addEventListener("mouseover",function(){ //do something... alert(1); },false); type2.addEventListener("mouseover",function(){ //do something different... alert(2); },false); type3.addEventListener("mouseover",function(){ //do something... alert(3); },false); type4.addEventListener("mouseover",function(){ //do something... alert(4); },false);
这里只有4个类目，我们可以一个一个的添加，但是如果在一个复杂的环境下，比如有50个类目、100个类目。我们对所有元素都绑定鼠标悬停事件，那么可以想象，这是多么恐怖和劳民伤财的事情。我们需要获取100次DOM节点，需要为函数开辟100个这样的存储空间。
就在这时，好消息来了。“事件代理”隆重出场。
2.什么是事件代理
为解决“事件处理程序过多”问题而提出的方案就是事件代理。事件代理主要是利用了事件冒泡（什么是冒泡，以及与事件捕获的区别，可以参考我的前面的博客），我们只需要至指定一个事件处理程序，就可以管理一系列类似的事件。比如需要对页面中多个按钮绑定click事件，这时，我们只需要对document对象注册一个click处理程序。当点击某个按钮时，事件冒泡会将点击事件传到document对象，这时候绑定的事件处理程序会执行，通过判断事件的发生对象，我们可以对不同的点击产生不同的操作。
好了，表述了这么多，大家有点晕了，下面看具体的代码，以下我选择了mouseover事件来给大家演示：
为了保证适当的兼容性，我们对事件绑定做了处理。
//传入要注册事件的元素，事件类型，以及事件处理函数
function addEvent(element,type,func){ document.addEventListener?element.addEventListener(type,func,false):element.attachEvent("on"+type,func);}
对于事件处理程序，我们也需要做一些兼容性的处理。
var handler=function(event){ var e=event||window.event;//兼容性处理，得到event对象 var relTarget=e.relatedTarget||e.fromElement;//兼容性处理，得到鼠标是从哪里进入目标对象的 var target=e.target||event.srcElement;//兼容性处理，得到事件的真正发出者 if(relTarget&&relTarget.nodeName.toLowerCase()=="ul"){ switch(target.id){ case "type1": console.log(1); break; case "type2": console.log(2); break; case "type3": console.log(3); break; case "type4": console.log(4); break; } }}
另外，这里要注意二点：
（1）由于是mouseover事件，鼠标在穿过子元素的时候也会产生mouseover事件，所以鼠标放到类别栏的时候，会出现抖动的现象（因为从鼠标li->a->li过程重复触发了mouseover事件）所以我们必须要判断鼠标是否是从子元素移动过来的。如果鼠标移动之前来自ul元素，表示是我们想要的展开列表操作，否则我们不作处理。
（2）由于鼠标可能从浏览器移动过来，在chrome、ie8、ie9下检测relatedTarget是null，FF下表现为undefined，ie7下是[object],另外ie7下鼠标停留在li里面刷新页面，relatedTarget也返回null。所以为了防止空值的出现，需要做出相应的判断if(relTarget&&relTarget.nodeName.toLowerCase()=="ul"){}
3、完整示例
有了前面的准备工作，我们来一个完整的示例
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title></title> <style> *{margin:0;padding:0} ul li{list-style:none;float:left;margin:10px;padding:8px;background-color: #ccc;} ul{background-color:red;float:left;} </style></head><body> <ul id="typeList"> <li id="type1"><a href="#">食品</a></li> <li id="type2"><a href="#">服饰</a></li> <li id="type3"><a href="#">居家</a></li> <li id="type4"><a href="#">数码</a></li> </ul></body><script type="text/javascript"> var handler=function(event){ var e=event||window.event;//兼容性处理，得到event对象 var relTarget=e.relatedTarget||e.fromElement;//兼容性处理，得到鼠标是从哪里进入目标对象的 var target=e.target||event.srcElement;//兼容性处理，得到事件的真正发出者if(relTarget&&relTarget.nodeName.toLowerCase()=="ul"){ switch(target.id){ case "type1": console.log(1); break; case "type2": console.log(2); break; case "type3": console.log(3); break; case "type4": console.log(4); break; } }}function addEvent(element,type,func){ document.addEventListener?element.addEventListener(type,func,false):element.attachEvent("on"+type,func);}addEvent(document.getElementById("typeList"),"mouseover",handler);</script></html>
从上面的代码中，大家可以发现，把鼠标放到不同的li上面以后，程序会做出不同处理，至此，事件代理已经实现。
4、事件代理的优势
通过上面的示例代码，我们能看到事件代理相比于传统的事件处理程序有以下优势：
（1）对DOM的操作减少，相比于之前处理方式，现在我们只需要引用一次DOM节点。大大减少了对于DOM的引用次数，自然设置事件处理程序的时间也降低了。
（2）整个页面中我们只有一个function对象，减少了内存的消耗，整体性能提升。
（3）用户体验更好，只要可点击元素呈现在我们面前，事件处理程序就能立即触发。以前会出现元素出现了，但是为元素注册的事件处理程序还未注册成功，造成元素不可点击，或点击了没反应。
三、事件代理思想的用处
这块内容感谢司徒正美，下文中的示例代码均来自于这个博客大牛，本人只是理解之后的记录。谢谢你无私的奉献，等我工作了，一定给你支付宝贡献点钱，哈哈！
看下面一段代码：
var delegate = function(client, clientMethod) { return function() { return clientMethod.apply(client, arguments); }}var ClassA = function() { var _color = "red"; return { getColor: function() { console.log("Color: " + _color); }, setColor: function(color) { _color = color; } };};var a = new ClassA();a.getColor();//reda.setColor("green");a.getColor();//greenconsole.log("执行代理！");var d = delegate(a, a.setColor);d("blue");console.log("执行完毕！");a.getColor(); //blue
由于我们不能直接操作ClassA中的_color，所以，必须通过类提供的对外接口去操作受保护的变量。或者通过delegate创建一个代理对象，改变this的指向，然后操作_color.其实说白了额，这就是call、apply的应用。
四、总结
事件代理可以为我们减少内存空间、提升页面整体性能。如果有必要，大家其实可以对document对象注册事件，这样所有动作都会冒泡到document并得到处理。
本人能力有限，文中有表述不当的地方，希望大家给予指正。如果各位基友和软妹子觉得文章对您有所帮助，你的留言和推荐将对我是莫大的鼓舞！
了解javascript中的事件（二）