作者：zccst
一、事件流
标准：DOM事件流中，实际的目标在捕获阶段不会接收到事件。即捕获从document到body就停止了。
在处于目标阶段，事件在div上发生，并在事件处理中被看成冒泡阶段的一部分。
实际：在捕获阶段会涉及，结果有两个机会在目标对象上操作事件。
二、事件处理程序（事件监听器）
事件处理程序：HTML，DOM0级，DOM2级
HTML：<input type="button" value="ClickMe" onclick="alert(‘Clicked‘)"
/>需转义特殊字符
缺点：1)先调用后解析会报错；2）作用域链有浏览器差异性；3）html和js耦合较严重。
DOM0级：var btn = document.;
btn.onclick=function(){};
冒泡阶段处理，删除用btn.onclick=null即可；
DOM2级：addEventListener("click",function(){},true);//true在捕获阶段，false在冒泡阶段
好处：可以添加多个事件处理程序
removeEventListener();移除，但无法移除匿名函数，如果想移除需写命名函数
IE事件处理程序：
attachEvent("onclick",function(){}). IE8及更早版本，只支持事件冒泡
与DOM0级事件不同的是DOM0在所属元素的作用域内运行；在attachEvent()方法情况下，在全局作用域中运行，this等于window
var btn = document.getElementById("myBtn");
btn.attachEvent("click",function(){ alert ( this == window); });
也可以添加多个，不同的是执行顺序，与标准正好相反（后添加先执行）
detachEvent也不能移除匿名函数
注：支持IE事件处理程序的浏览器有IE何Opera。
跨浏览器，只需关注冒泡阶段
1，addHander(ele,type,handler)
视情况分别使用DOM0级、DOM2级防腐或IE防腐来添加事件
var EventUtil = {
addHandler:function(elem,type,handler){
if(elem,addEventListener){
elem.addEventListener(type, handler, false);
}else if(elem.attachEvent){
elem.attachEvent("on"+type, handler);
}else{
elem["on"+type] = handler;
}
},
removeHandler:function(elem,type,handler){
if(elem.removeEventListener){
elem.removeEventListener(type, handler, false);
}else if(elem.detachEvent){
elem.detachEvent("on"+type, handler);
}else{
ele["on"+type] = null;
}
}
}
这两个方法会先检测是否存在DOM2级，如果是IE浏览器，最后一种可能是DOM0级方法。
使用：
var btn = document.
var handler =
function(){};
EventUtil.addHandler(btn,‘click‘,handler);
三、事件对象
<input type="button" value="ClickMe" onclick="alert(event.type)" />
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert(event.type);//"click"
};
btn.addEventListener("click",function(event){
alert(event.type);//"click"
}, false);
1，标准事件对象
event共有的成员：bubbles,cancelable（是否可以取消冒泡）,currentTarget,defaultPrevented,preventDefault(),stopPropagation,target,type等
如果直接将事件处理程序指定给了目标元素，则this == currentTarget ==
target（currentTarget是绑定事件处理程序的对象）
如果事件处理程序存在于按钮的父节点中，则三者不相同。this和currentTarget指向父元素（target始终指向自身）
preventDefault() 阻止默认行为。比如a的默认行为是点击时导航到href指定的URL。 var link = document;
link.onclick=function(e){e.preventDefault();}
stopPropagation()
停止冒泡
eventPhase 1捕获阶段，2处于目标对象，3处于冒泡阶段。event.eventPhase
2，IE事件对象
cancelBubble, returnValue, srcElement,
type
DOM0级：window.event
DOM2级：event
preventDefault = returnValue
stopPropagation() = cancelBubble
target =
srcElement
3，跨浏览器事件对象
四个函数：
getEvent()
getTarget()
preventDefault()
stopPropagation()
四、事件类型
DOM3规定：
UI：
load,unload,abort,error,select,resize,scroll
焦点：blur,focus,focusin/focusout（冒泡）
鼠标/滚轮
除了mouseenter/mouseleave不冒泡，其他都冒泡。顺序：down-up-click-down-up-click-db
ClinetX/ClientY所有浏览器都支持
pageX/pageY页面本身的左边和顶边计算的，而非浏览器。没有页面滚动时，两者相同。I8及更早不支持page
ScreenX/ScreenY屏幕坐标
相关元素：mouseover和mouseout，配对出现的。
键盘/文本：keydown,keypress,keyup。字符键down-press-up，非字符键down-up
合成事件
变动事件：删除节点，添加节点
HTML5事件：context，beforeunload
设备事件：
触摸与手势事件：touchstart,touchmove,touchend
五、内存和性能
1，事件委托
2，移除事件处理程序 btn.onclick=null,
onunload事件移除所有事件处理程序