JS 事件
与浏览器交互的时候页面会触发各种事件。比如比较常用的‘load’,'click','change','scroll'等。
1.事件冒泡
要理解事件冒泡，得先理解事件流的定义。事件流是指页面接收事件的顺序。
而事件冒泡则是指开始时事件由最具体的元素接收，然后向上层一级级传播，到不具体的元素。例如：div-->body-->html-->document-->window。现代所有浏览器都支持事件冒泡。事件冒泡可以理解为一个气泡从水底慢慢向上冒的过程。
2.事件捕获
事件捕获的思想跟事件冒泡相反。由不具体的最上层的节点接收，慢慢向下层捕获，最后收到事件的是最具体的节点。例如:document-->html-->body-->div。目前IE9-不支持事件捕获。“DOM2级事件”规范要求事件应该从document开始向下传播，但是大部分浏览器都是从window对象开始的。
考虑到兼容IE，建议都使用事件冒泡。
3.DOM事件流
“DOM2级事件流”包括事件捕获阶段，处于目标阶段，事件冒泡阶段。例如:Document-->html-->body-->div-->body-->html-->document。这三个阶段都有可能触发事件。
4.事件处理程序
响应某个事件处理的函数就叫事件处理程序。
“DOM0级“事件处理程序很简单，只在冒泡阶段处理。写法如:elem.onclick = function(){}。
”DOM2级“事件处理程序定义了两个方法，addEventListener和removeEventListener可以同时绑定或删除多个事件处理程序，并且按照添加顺序依次处理。
addEventListener(name,func,bool),removeEventListener(name,func,bool)接受三个参数：第一个参数是要处理的事件名称（如click,scroll,change等），第二个参数是事件处理的函数，第三个参数是布尔值，true表示在事件捕获阶段调用事件处理程序，false表示在事件冒泡阶段调用事件处理程序，一般默认false。
IE的写法：attacheEvent(name,func),detachEvent(name,func)接受两个参数：第一个参数表示事件处理程序的名称，用”on“开头（如onclick,onload等）。第二个参数表示事件处理函数。IE中添加的事件处理程序只会被添加到事件冒泡阶段。
IE与DOM写法不同，除了事件的名称有"on"开头之外，还有个很大的区别就是事件处理函数的作用域。使用attachEvent()时，事件处理函数是在全局作用域window中执行，所以this就是window。
attachEvent()也能添加多个事件处理程序，但是事件的执行顺序与添加顺序相反。
5.event事件对象
在触发DOM上的某个事件时，会产生事件对象event，这个对象包含着所有和这个事件有关的信息。不过IE又有不同的写法。event有很多属性，下面列出几个常用的。
1.事件对象
标准：event
IE:window.event
2.事件目标元素
标准：event.target,event.currentTarget,前者指事件的真正目标，后者指当前目标。利用target可以做事件代理。
IE：event.srcElement
3.阻止事件的默认行为
标准:event.preventDefault()
IE：event.returnValue = false;
4.阻止事件中DOM层中的传播
标准：event.stopPropagation()
IE:event.cancelBubble = true;
6.事件委托
事件委托就是处理”事件程序过多“的问题的。事件委托利用事件冒泡，在冒泡的某个元素上，只指定一个事件处理程序，就可以管理某一类型的所有事件。
代码组件：
var EventUtil = {
getEvent: function(e){
return e ? e : window.e;
},
getTarget: function(e)[
return e.target || e.srcElement;
},
preventDefault: function(e){
if(e.preventDefault){
e.preventDefault();
}else{
e.returnValue = false;
}
},
stopPropagation: function(e){
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
},
addHandler: function(element, type, handler) { if (element.addEventListener) { // DOM2 element.addEventListener(type, handler, false); } else if (element.attachEvent) { // IE element.attachEvent('on' + type, handler); } else { // DOM0 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; } } };
