Javascript: DOM2高级事件处理

除了Internet Explorer以外，所有的现代浏览器都支持2级DOM的事件模型.

1. 事件的传播： 在0级DOM事件模型中，浏览器把时间分派给发生事件的文档元素。如果那个对象具有适合的事件句柄，就运行这个句柄。除此之外不执行其他操作。
   在2级DOM事件模型中，当事件发生在文档元素上时，目标的事件句柄就被触发。此外，目标的每个祖先元素也有机会处理那个事件。
   事件传播分为三个阶段进行：第一，在捕捉（capturing）阶段 ，事件从Doucment对象沿着文档元素向下传播给目标节点。如果目标的任何一个祖先专门注册了捕捉事件的句柄，那么在事件传播过程中，就会运行这些句柄。事件传播的下一个阶段发生在目标节点自身 ，直接注册在目标上的适合的事件句柄将运行。这与0级时间模型提供的时间处理方法相似。事件传播的第三个阶段是起泡（bubbling）阶段 ，在这个阶段，时间将从目标元素向上气泡回Document对象的文档层次。虽然所有事件都受事件传播的捕捉阶段的支配，但并非所有类型的事件都气泡。（例如：把提交事件从元素向上传播到控制它的文档元素是毫无意义的。）在时间传播过程中，任何事件句柄都可以调用表示那个事件Event对象的stopPropagation()方法，停止事件的进一步传播。有些事件会引发浏览器执行的默认动作。例如，在点击标记时，浏览器的默认动作是进行超链接。这样的默认动作只在事件传播的三个阶段完成之后才执行，事件传播过程中调用的任何句柄都能通过调用Event的preventDefault()方法阻止默认动作的发生。 0级DOM模型中，只能为特定对象的特定类型的事件注册一个事件句柄 2级DOM模型中，可以为特定对象的特定类型事件注册任意多个处理器函数。
2. 事件句柄的注册： 在2级事件模型中，可以调用对象的addEventListener()方法为特定元素注册注册事件句柄。这个方法有三个参数。第一个参数是要注册句柄的事件类型名 。如'click','mouserover',etc. 第二个参数是句柄函数 ，在指定类型的事件发生时调用该函数。在调用这个函数是，传递给它的唯一参数是Event对象 。 addEventListener的最后一个参数 是一个布尔值。如果值为true，则指定的时间句柄将在事件传播的捕捉阶段用于捕捉事件。如果为false，则事件就是常规事件，当事件直接发生在对象上或发生在元素的子女上向上冒泡时，该句柄被触发 。通过该方法，可以为一个指定的对象的指定类型的事件注册多个事件句柄。如果多次调用addEventListener()方法给同一个对象同一类型的事件注册多个处理函数，那么该对象的该类型的时间发生时，所有注册的事件都将被调用。需要注意的是：第一，注册句柄的顺序与执行顺序无关；第二，重复注册同一函数，只能执行一次。
   与addEventListener()方法相配对的是removeEventListener()方法。它的三个参数与前者相同，不过是从对象中删除事件处理函数。通常，临时注册一个事件处理函数，用完后迅速删除它比较有效。
   addEventListener()和removeEventListener()方法都由EventTarget接口定义。在支持2级DOM Event的浏览器中，Element和Document节点都实现了这一接口并且提供了时间注册方法。（实际上，web浏览器也支持在window对象上的事件句柄注册。）
3. 事件模块和事件类型：
   there is one method that will level you to test what levels of DOM specifications are supported in a specific Web browser: document.implementation.hasFeature(feature, level). It returns true, if the specified feature and level is supported by the Web browser. Note that the level must be specified in the dot format like 1.0, 2.0, or 3.0.
   可以通过该方法测试浏览器对Event API的支持：document.implementation.hasFeature('Events', '2.0')。但Event模块只有用于基本事件处理基础结构的API。对特定类型的事件的支持，则交给子模块。每个子模块提供对某类相关类型的事件的支持，并定义一个Event类型，该类型传递给每个类型的事件句柄。例如：MouseEvents子模块提供对mousedown、mouseup、click和相关事件类型的支持。它还定义了MouseEvent接口，实现该接口的对象将传递给该模块支持的其他事件类型的处理函数。
   模块名--------事件接口--------事件类型
   HTMLEvents--Event----------about,blur,change,error,focus,load,reset,resize,scroll,select,submit,unload
   MouseEvents-MouseEvent----click,mousedown,mousemove,mouseout,mouseover,mouseup
   UIEvents-----UIEvent--------DOMActivate,DOMFocusIn,DOMFocusOut
   HTMLEvents和MouseEventsmo模块定义的事件类型和0级事件模块中的事件类型相似。UIEvents模块定义的事件类型和HTML表单元素支持的聚焦，取消焦点和点击时间相似，不过对他们进行了推广，任何能接收焦点或以其他方式激活的文档元素都可以生成这一事件 。
4. Event接口：
   Event接口定义的属性：
   --type:  事件的类型。如：click，mouseover
   --target：时间发生的焦点，可能与currentTarget不同
   --eventPhase：一个数字，指定当前所处的事件传播过程的阶段。它的值是常量：Event.CAPTURING_PHASE,Evetn_AT_TARGET或EVENT_BUBBLING_PHASE。
   --timeStamp：一个Date对象，声明了事件何时发生。
   --bubbles：布尔值，是否在文档中气泡。
   --cancelable：布尔值，声明该事件是否具有能用preventDefault（）方法取消的默认动作。
   Event接口定义的方法：
   --stopPropagation()：阻止事件传播
   --preventDefault()：阻止浏览器执行默认动作。
   UIEvent接口增加的属性：
   --view：发生事件的window对象。
   --detail：一个数字，提供事件的额外信息。对于click事件，mousedown事件和mouseup事件，这个字段代表点击的次数。1代表点击1次，2代表双击，3代表点击3次（注意：每次点击都生成一个事件，但是如果多次点击的时间间隔足够近，就可以用detail值说明它。每个detail值为2的鼠标事件之前总有一个值为1的鼠标事件。）对于DOMActivate时间，这个字段的值为1表示正常激活，2表示超级激活：如双击鼠标或同时按下shift键和回车键。
   MouseEvent额外的属性：
   --button：0表示左键，1表示中间键，2表示右键。这个属性只在鼠标键状态改变时使用。如：mousemove事件中不能用来汇报按键是否被按下或者保持住。
   --altKey，ctrlKey，metaKey和shiftKey：声明鼠标事件发生时，是否按住了Alt键，Ctrl键，Meta键和Shift键。这些键盘属性对任何鼠标事件类型都有效。
   --clientX，clientY：鼠标指针相对于浏览器窗口的X和Y坐标。注意，这两个坐标不考虑文档滚动。在IE以外的浏览器，加上window.pageXOffset和window.pageYOffset可以把窗口坐标转换为文档坐标。
   --screenX，screenY：鼠标相对于显示器左上角的X和Y坐标。
   --relatedTarget：该属性引用与事件的目标节点相关的节点。对于mouseover事件来说，它是鼠标移到目标上时所离开的那个节点。