js——事件

一、 事件流

1. 事件分类

   事件流分类两种，IE的事件流叫做 事件冒泡，Netscape提出了事件捕获事件流
   事件冒泡是从目标节点div开始向上层逐级冒泡直到Document对象，这样的结果是事件会沿着DOM树向上传播，在每一级节点都会发生该事件；事件捕获是不太具体的节点应该更早接受到事件，而最具体的节点应该最后接收到事件，它的目的在于事件到达预定目标之前捕获它，当点击预定<div>节点时，就会从document对象沿着dom树向下触发事件。
   注：IE9之后绝大多数浏览器都支持事件捕获

2. DOM事件流
   “DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段
   实际的目标在捕获阶段不会接收事件。意味着在捕获阶段，事件从document最终到body后就停止了，下一阶段是处于目标阶段，于是事件在div上发生，并在事件处理中被看成冒泡阶段的一部分。

二、 事件处理程序

         事件处理程序的名字以”on“开头。为事件制定处理程序的方式有好几种。

1. HTML事件处理程序

       简单来说，HTML事件处理程序就是嵌入式JS，比如下面的这种，shouMessage()是定义的同名JS function。由于这个值是javascript，所以不能在其中使用未经转义的HTML语法字符，例如& ”“ < >

     <input type="button" onclick="showMessage()"/>

     这样处理的独到之处，是会创建一个封装元素属性值得函数，函数中有一个局部变量event，也就是事件对象 <input type="button" onclick="alert(event.type)"/>，通过event可以访问时间对象。
     在函数内部，this值等于事件目标元素，这可以通过with扩展作用域（在严格模式下不可用），通过这样的方式像访问局部变量一样访问document及该元素本身的成员。因此可以通过οnclick="alert(value)"而不是οnclick=“alert(this.value)”

function(){
with(dcoument){
      with(this){
      //如果当前元素是个表单输入元素，则作用域还会包含访问表单元素的入口，这个函数这里会变成this.form
      //元素属性
      }
    }
}

    缺点： 第一个是存在一个时差问题，因为用户可能会在HTML元素一出现在页面上就出发，而这时事件处理程序可能尚不具备执行条件，因此可用tyr-catch块使错误不浮出水面。

<input type="button" value="Click me" onclick="try{showMessage();} catch(ex){}">

    另一个缺点是这样扩展事件处理程序的作用域链在不同浏览器中会导致不同结果，不同js引擎遵循的标识符解析规则略有差异，很可能在访问非限定对象成员时出错。

2. DOM0事件处理程序
       通过将一个函数赋值给一个事件处理程序属性。这种方式简单而且可以跨浏览器。首先取得一个要操作的对象的引用，然后给其赋值一个事件处理程序
   btn.οnclick=function(){
   alert(this.id);
   };
   删除DOM0级方法指定的事件处理程序：btn.οnclick=null;

3. DOM2级事件处理程序
       用addEventListener()和removeEventListener()删除和添加事件处理程序，DOM2级时间处理程序支持时间冒泡也只是事件捕获，当该方法的最后一个参数是true时就在事件捕获阶段调用事件处理程序,如果是false就在事件冒泡阶段调用事件处理程序。

       相比DOM0事件，DOM2级方法可任意添加多个事件处理程序。缺点是，移除事件处理程序的参数要和添加事件处理程序使用的参数保持一致，因此通过addEventListener添加的匿名函数无法移除。

4. IE事件处理程序
       

三. 事件对象

5. 事件类型
6. 内存和性能
7. 模拟事件