JS中事件和事件处理

 

JS中事件和事件处理

一、事件处理程序：

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

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

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

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

       例如，用addEventListener()方法，为<form>元素的提交事件注册一个处理程序：

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

Validate(e.target);

}; false)

 如果想捕捉<div>元素中发生的所有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没有标准化任何类型的键盘事件！！

   

模块名

事件接口

事件类型

HTMLEvents

Event

abort,blur,change,error,focus,load,reset,resize,

scroll,select,submit,unload

MouseEvents

MouseEvent

Click,mousedown,mousemove,mouseout,

mouseover,mouseup

UIEvents

UIEvent

DOMActivate,DOMFocusIn,DOMFocusOut

MutationEvents

MutationEvent

DOMAttrModified,DOMCharacterDataModified

DOMNodeInserted,DOMNodeInsertedIntoDocument

DOMNodeRemoved,DOMNodeRemovedFromDocument

DOMSubtreeModified

这四个接口构成一个层次。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

       Else e.cancelBubble=true;

与之配对的是detachEvent()方法。

attachEvent()方法和addEventListener()方法之间的另一个差别是：用attachEvent()方法注册函数将被作为全局函数调用，而不是作为发生时间的文档元素的方法。也就是说，在attachEvent()注册的事件处理程序执行时，关键字this引用的是Window对象，而不是事件目标元素