事件监听

1，三种事件流：
    事件冒泡：从子到父传递事件(目标元素被移除时，不再冒泡)；
    事件捕获：从父到子传递事件；
    DOM事件流：类似android，事件捕获阶段——处于目标阶段——事件冒泡阶段。


2，事件处理程序：
    HTML事件处理程序：使用与事件处理程序相同的属性名指定；
<input type="button" οnclick="alert('Clicked')" />
弊端：
   时差问题，用户点击事件时，有可能事件程序还没有生成，造成错误；
   扩展事件作用域因浏览器不同有所差异；
   HTML代码与JS代码紧耦合；


DOM0级事件处理程序：将一个函数在JS中赋值给一个事件处理程序属性，在冒泡阶段得到处理；
 var btn = document.getElementById("myBtn");
        btn.onclick = function(){
            alert(this.id);
        };
        var removeBtn = document.getElementById("myRemoveBtn");
        removeBtn.onclick = function(){
            btn.onclick = null;
        };


DOM2级事件处理程序：定义了两个DOM节点的函数，分别表示添加事件处理程序和删除事件处理程序；
不能删除匿名函数，可以添加多个事件处理程序，并且会按顺序生效；不能使用handler=null的方式删除事件处理程序；
  var handler = function(){
            alert(this.id);
        };
        btn.addEventListener("click", handler, false); //第三个参数为false表示冒泡阶段处理，为true在事件截获阶段处理
        var removeBtn = document.getElementById("myRemoveBtn");
        removeBtn.onclick = function(){
            btn.removeEventListener("click", handler, false);  //works!
        };
所有的浏览器都支持在冒泡阶段处理事件，所以没有特殊需求最好在冒泡阶段处理事件程序。
现代浏览器基本上支持DOM2级事件处理程序，如果子节点想要截获事件可以调用wvent的stopPropagation()方法。


3，事件对象：触发DOM事件时会产生一个事件对象event,这个对象会包含所有与事件相关的信息；
这个对象只存在于与事件执行期间，事件执行结束就会被销毁。


4，事件类型：事件都可以在元素上触发，全部完成就会在window上面触发，所有框架都完成在框架集上面触发；
img对象在设置了src属性后就会自动加载，script需要添加到文档中才会开始加载；
有下面几种类型的事件：
UI事件(ui交互时触发，比如load/select/scroll)、焦点事件、鼠标与滚轮事件、键盘与文本事件；
DOM2级变动事件(添加或者删除节点时触发，比如DOMNodeRemoved、DOMNodeRemovedFromDocument(不冒泡)、DomSubtreeModified)；
HTML5事件(自定义事件，比如contextmenu鼠标右键事件，DOMContentLoaded框架加载完成事件)、设备事件(重力感应之类的事件)；
触摸与手势事件：有touches/changeTouches等数组，多点触摸时，事件目标就是多个手指都位于其范围内的那个元素。
这些事件有的可以冒泡有的不能冒泡，一定要分清楚事件目标；不能冒泡的事件只有其目标节点才能监听到。


5，内存与性能：过多的设置事件处理程序导致占用内存变高、访问DOM次数增加，从而导致页面交互变慢。
提升性能的方法：
事件委托：利用事件冒泡，在合适的元素上指定一个事件处理程序，处理同一类型的多个事件。
及时移除事件处理程序：移除带事件处理程序的节点、卸载页面时容易产生空事件处理程序，滞留在内存中，要及时移除。

6，模拟事件：用JS模拟特定事件。
步骤如下：
var event = document.creatEvent("MouseEvents");          //创建事件，传入事件类别
event.initMouseEvent("click", true, true, document.defaultView, //初始化事件
0, 100, 0, 0, 0, false, false, false, false, 0, btn2);
btn.dispatchEvent(event);                //触发事件