事件： js与html之间的交互是通过事件完成的
事件就是用户或浏览器自身执行的某种动作。诸如 click、load 和 mouseover，都是事件的名字。
而响应某个事件的函数就叫做事件处理程序（或事件侦听器）。
事件流：事件流描述的是从页面中接收事件的顺序;IE的事件流是事件冒泡流，Netscape团队的事件流是事件捕获流;
事件冒泡：事件开始时由最具体的元素（页面中嵌套最深的元素）接收，然后逐级向上传播，到document，IE9、Firefox、Chrome 和 Safari 则将事件一直
冒泡到 window 对象。
事件捕获： 事件捕获的思想是不太具体的节点应该更早的接收到事件，而具体的节点最后接收到事件
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段;捕获阶段不会涉及事件目标。
事件绑定：
addEventListener()和 removeEventListener();
使用 DOM2 级方法添加事件处理程序的主要好处是可以添加多个事件处理程序。
var btn = document.getElementById("myBtn");
btn.addEventListener("click", function(){
alert(this.id);
}, false);
btn.addEventListener("click", function(){
alert("Hello world!");
}, false);
js兼容：
event,window.event(ie)
event.target,event.srcElement(id)
阻止默认行为: event.preventDefault();event.returnValue = false;(ie)
阻止事件冒泡: event.stopPropagation();event.cancelBubble = true;(ie)
pageY = clentY + scrollTop
oncontextmenu 自定义菜单
触摸事件
touchstart: 手指触摸屏幕时触发，即使已经有一个手指放在了屏幕上也会触发
touchmove: 当手指在屏幕上滑动时连续地触发
touchend: 当手指从屏幕上移开时触发。
touchcancel：当系统停止跟踪触摸时触发。
除了常见的 DOM 属性外，触摸事件还包含下列三个用于跟踪触摸的属性。
touches：表示当前跟踪的触摸操作的 Touch 对象的数组。
targetTouchs：特定于事件目标的 Touch 对象的数组。
changeTouches：表示自上次触摸以来发生了什么改变的 Touch 对象的数组。
内存和性能
在 JavaScript 中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能。
（1.函数是对象占内存，内存中对象越多性能越差。2.必须事先指定所有事件处理程序导致访问DOM次数会延迟整个页面交互就绪时间）
方法：
1.对“事件处理程序过多”问题的解决方案就是事件委托，利用事件冒泡只指定一个事件处理程序，就可以管理某一类型的所有事件
<ul id="myLinks">
<li id="goSomewhere">Go somewhere</li>
<li id="doSomething">Do something</li>
<li id="sayHi">Say hi</li>
</ul>
var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
switch(target.id){
case "doSomething":
document.title = "I changed the document's title";
break;
case "goSomewhere":
location.href = "http://www.wrox.com";
break;
case "sayHi":
alert("hi");
break;
}
});
2.移除不需要的事件处理程序
// 避免重复点击按钮（重复提交表单，重复支付）
<div id="myDiv">
<input type="button" value="Click Me" id="myBtn">
</div>
var btn = document.getElementById("myBtn");
btn.onclick = function(){
//先执行某些操作
btn.onclick = null; //移除事件处理程序
document.getElementById("myDiv").innerHTML = "Processing...";
};