标签：
1 事件流
事件冒泡：当一个元素接收到事件的时候，会把他接收到的所有传播到他的父级，一直传播到window。阻止冒泡：在当前要阻止冒泡的事件函数中调用 event.cancleBubble=true;现代的浏览器中默认使用的是事件冒泡机制，由于老版本不支持事件捕获，所以很少有人使用事件捕获。因此建议使用事件冒泡。
2 事件处理程序
在DOM中，用于处理指定和删除事件的处理程序的操作：addEventListener()和removeEventListener().在两种方法中，接收三个参数：要处理的事件名、事件处理的函数，选用何种阶段调用事件处理程序。其中第三个参数如果为true的话，则表示在捕获阶段调用事件处理程序，为flase的话，则表明在冒泡的阶段调用事件处理函数。如果为同一个元素添加了多个事件处理程序，那么会按照添加的顺序进行触发。
两种方法中，其是相生相对的，即通过第一种方法添加的事件处理必须用第二种方法来解除；同时要注意在移除时，所传入的函数必须与添加时所传入的函数相同，这也意味着添加方法中，如果添加匿名函数的化，那么将难以移除。(IE9,Firefox，Safari,Chrome和Opera支持DOM2级事件处理程序)
在IE中，存在着相对应的attachEvent（）和detachEvent（），同时注意在这两种方法中接收：事件处理程序名称和事件处理函数。同时由于IE的特殊性，所以其一般默认添加到冒泡的阶段调用事件处理函数。注意如果为同一元素添加多个事件处理程序，那么会以相反的顺序触发。注意：支持IE事件处理程序的浏览器只有IE和Opera。
为了处理好跨浏览器的方式处理事件，所以使用一个名叫EventUtil的对象。
var EventUtil = { addHandler: function(element, type, handle){ if(element.addEventListener){ element.addEventListener(type, handle, false) } else if (element.attchEvent){ element.attachEvent("on" + type, handle) //为了在IE8及更早版本中运行，事件类型要加上“on”前缀。 } else{ element["on" + type] = handle; //该方法为DOM0使用的方法，一般不会执行该方法。 } }, removeHandler: function(element, type, handle){ if(element.removeEventListener){ element.removeEventListener(type, handle, false) } else if (element.detachEvent){ element.attachEvent("on" + type, handle) } else{ element["on" + type] = null; } } }
3 事件对象
该内容不熟，先跳过。
4 事件类型
该内容太复杂，先略过。
5 内存和性能
由于每个函数都是对象，会占用内存，；如果对象过多，那么性能就会越差。其中造成性能过差的原因之一就是事件处理程序过多，所以事件委托机制就产生了。
事件委托机制利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。以下面为例：
//这是传统的做法
var item1 = document.getElementById(‘goSome‘); var item2 = document.getElementById(‘doSome‘); var item3 = document.getElementById(‘sayHi‘); EventUtil.addHandler(item1,‘click‘,function(e){ location.href = ‘http://www.weibo.com‘; }) EventUtil.addHandler(item2,‘click‘,function(e){ document.title = ‘I changed the title‘; }) EventUtil.addHandler(item3,‘click‘,function(e){ alert(‘hi‘); })
//这是事件委托机制下的做法
var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, removeHandler: function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } }, 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.cancelBubbles = true; } }, getRelatedTarget: function (event) { if (event.relatedTarger) { return event.relatedTarget; } else if (event.toElement) { return event.toElement; } else if (event.fromElement) { return event.fromElement; } else { return null; } } }; var list = document.getElementById(‘myLinks‘); EventUtil.addHandler(list,‘click‘,function(e){ event = EventUtil.getEvent(e); var target = EventUtil.getTarget(event); switch(target.id){ case "goSome": location.href = ‘http://www.weibo.com‘; break; case "doSome": document.title = ‘I changed the title‘; break; case "sayHi": alert(‘hi‘); break; } });
在上个代码中，只为ul元素添加一个点击事件。在ul元素下的li中，其会冒泡，所以li的点击都会被这个函数所处理。由于其只取得一个DOM元素，所以占用的内存更少，所有用到按钮的事件都适合采用事件委托技术。
新的做法与传统的做法有几个优点：
（1）document对象很快可以访问。而且可以在页面生命周期的任何时点上围棋添加事件处理程序（不需要DOMContentLoaded或load事件）。即如果可以点击的元素呈现在页面上，便可以具备相应的功能。
（2）在页面中设置事件处理程序所需的时间更少。
（3）提升整体性能。
能够采用事件委托技术的事情包括click、mousedown、mouseup、keydown、keyup和keypress。虽然mouseover和mouseout事件也冒泡，但是经常要计算其元素的位置，所以不建议使用。
为了提高整体性能，除了可以使用事件委托机制以外，还可以在不需要的时候移除事件处理程序。
该套方法还是不太熟悉，再跳过。
6 模拟事件
标签：
原文地址：http://www.cnblogs.com/xigua1994/p/5573953.html
