JS中事件和事件处理

JS中事件和事件处理

一、事件处理程序：

     在0级中可以这样定义：document.fromName..name.onclick=function(){};函数事件

  在2级时间模型中，可以调用对象的addEventListener()方法为特定元素注册事件处理程序。这个方法有三个参数。第一个参数是要注册处理程序的事件类型名。事件类型应该是喊有小写HTML处理程序性质名的字符串，没有前缀”on”,如在html中性质onclick，在0级模型中用onclick属性，而在2级事件模型中就用字符串“click”。

   第二个参数是处理函数（或监听者），在指定类型的事件发生时调用该函数。

       第三个参数是一个boolean，如果值为true，则指定的事件处理程序将在事件传播的捕捉阶段用于捕捉事件。如果值为false，则事件处理程序就是常规的，当事件直接发生在对象上，或发生在元素的子女上，又向上起泡到该元素时，该处理程序将触发。

       例如，用addEventListener()方法，为

元素的提交事件注册一个处理程序：

Document.myform..addEventListener(“submit”,function(e){

Validate(e.target);

}; false)

 如果想捕捉 元素中发生的所有mousedown事件，可以使用如下 addEventListener()方法：var mydiv=document.getElementById(“mydiv”);

       mydiv.addEventListener(“mousedown”,hadleMouseDown,true);

与addEventListener()方法配对的是removeEventListener()方法，它的 三个参数与前者相同。

二、

       在0级事件模型中，在函数中，关键字this引用的就是发生事件的元素。

       在2级事件模型中，不应该依赖事件处理函数中的关键字this，而应该使用传递给处理函数的EVENT对象的属性currentTarget. currentTarget属性引用一个对象，该对象注册了当前的事件处理程序，而且是可以移植的方式注册的。

三、把对象注册为事件处理程序：

       事件处理程序是实现了eventListener 接口和handleEvent ()方法的对象，DOM API的javascript规约不要求实现eventListener 接口，而只允许给addEventListener()方法直接传递函数引用，如果想用对象作为事件处理程序，那么可以使用如下方式来注册他们：

Function registerObjectEventHandler( elenment,eventtype,listener,captures){

                     Element.addEventListener(eventtype,

Function(event){listener.handleEvent(event);},captures);

}

用这个函数可以把任何对象注册为事件处理程序，只要它定义了handleEvent（）方法。该方法作为监听程序对象的方法而调用，关键字this 引用的是监听程序对象而不是生成事件的文档元素。

四、事件模型和事件类型：

       2级DOM没有标准化任何类型的键盘事件！！

   

这四个接口构成一个层次。Event接口是这个层次的根，UIEvent是Event接口的子接口，

MouseEvent是UIEvent接口的子接口，MutationEvent是Event接口的子接口

Evnet接口定义的属性：

       type

发生的事件的类型，该属性的值是事件类型名，与注册事件处理程序是使用的字符串值相同（如：“ click”）.

       target

                     发生事件的节点，可能与 currentTarget不同。

       eventPhase

一个数字，指定了当前所处的事件传播过程的阶段。它的值是常量，可能值包括Event.CAPTURING_PHASE、Event.AT_TARGET或

Event.BUBBLING_PHASE.

       currentTarget

发生当前正在处理的事件的节点。如果在传播过程的捕捉阶段或起泡阶段处理事件，这个属性的值就与target属性的值不同

       timeStamp

                     一个Date对象，声明事件何时发生

       bubbles

                     一个布尔值，声明该事件是否在文档树中起泡。

       cancelable

                     一个布尔值，声明该事件是否具有能用preventDefault()方法取消默认动作

Evnet接口还定义了2个方法： stopPropagation() 和preventDefault().

       调用stopPropagation()方法可以阻止事件从当前正在处理它的节点传播。

       调用preventDefault()方法阻止浏览器执行与事件相关的默认动作。

 

UIEvent接口还定义2个的属性：

       view

         发生事件的Window对象（在DOM术语中称为“视图”）

       detail

一个数字，提供时间的额外信息，对于click事件、mousedown事件和mouseup事件，这个字段代表点击的次数。

MouseEvent是UIEvent和Event的子接口，它还定义了下列属性：

       button

一个数字，声明在click事件、mousedown事件和mouseup事件中，哪个鼠标键改变了状态。值为0表示左键，值为1表示中间键，值为3表示右键，这个

属性只在鼠标键状态改变时用

       altKey、ctrKey、metaKey、shiftKey

                     这四个布尔值声明在鼠标事件发生时，是否按住了Alt键、Ctr键、Meta键或

                     Shift键。与button属性不同，这些键盘属性对任何鼠标事件类型都有效。

       clientX、clientY

                     这2个属性声明鼠标指针相对于客户区或浏览器窗口的X坐标和Y坐标

       screenX、screenY 

                     这2个属性声明鼠标指针相对于浏览器窗口左上角的X坐标和Y坐标

       relatedTarget

                     该属性引用与事件的目标节点相关的节点。

五、IE事件

       IE中的事件起泡：IE事件模型没有2级DOM模型具有的事件捕捉概念，事件可以

沿着包容层次向上起泡。IE Event对象没有DOM Event对象具有的stopPropagation()方法，所以要阻止事件起泡或者进一步传播，IE事件处理程序必须把Event对象的cancekBubble属性设为true：window.event.cancelBubble=true

注意：设置cancelBubble属性只适用于当前事件，当新事件生成时，将赋予window.event新的Event对象，cancelBubble属性将还原为它的默认值false。

       IE事件处理程序的注册，由于IE事件模型不支持事件捕捉，所以它只有2个参数，即事件类型和处理函数。可以用attachEvent()方法注册事件处理程序：

       fuction  f(e){…}

       document.getElementById(“myelt”).attachEvent(“onmouserover”,f)

//不要让事件进一步传播

       If(e.stopPropageation)e. stopPropageation();//2级DOM

<span lang="EN-US" sty