JS中事件和事件处理

JS中事件和事件处理

一、事件处理程序：

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

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

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

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

       例如，用addEventListener()方法，为

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

Document.myform..addEventListener(“submit”,function(e){<o:p></o:p>

Validate(e.target);

}; false)

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

  

       mydiv.addEventListener(“mousedown”,hadleMouseDown,true);<o:p></o:p>

与addEventListener()方法配对的是removeEventListener()方法，它的 三个参数与前者相同。<o:p></o:p>

<o:p></o:p>

二、<o:p></o:p>

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

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

<o:p></o:p>

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

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

Function registerObjectEventHandler( elenment,eventtype,listener,captures){<o:p></o:p>

                     Element.addEventListener(eventtype,<o:p></o:p>

Function(event){listener.handleEvent(event);},captures);<o:p></o:p>

}<o:p></o:p>

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

<o:p></o:p>

四、事件模型和事件类型：<o:p></o:p>

       2级DOM没有标准化任何类型的键盘事件！！<o:p></o:p>

    <o:p></o:p>

模块名<o:p></o:p>	事件接口<o:p></o:p>	事件类型<o:p></o:p>
HTMLEvents<o:p></o:p>	Event<o:p></o:p>	abort,blur,change,error,focus,load,reset,resize,<o:p></o:p> scroll,select,submit,unload<o:p></o:p>
MouseEvents<o:p></o:p>	MouseEvent<o:p></o:p>	Click,mousedown,mousemove,mouseout,<o:p></o:p> mouseover,mouseup<o:p></o:p>
UIEvents<o:p></o:p>	UIEvent<o:p></o:p>	DOMActivate,DOMFocusIn,DOMFocusOut<o:p></o:p>
MutationEvents<o:p></o:p>	MutationEvent<o:p></o:p>	DOMAttrModified,DOMCharacterDataModified<o:p></o:p> DOMNodeInserted,DOMNodeInsertedIntoDocument<o:p></o:p> DOMNodeRemoved,DOMNodeRemovedFromDocument<o:p></o:p> DOMSubtreeModified<o:p></o:p>

这四个接口构成一个层次。Event接口是这个层次的根，UIEvent是Event接口的子接口，<o:p></o:p>

MouseEvent是UIEvent接口的子接口，MutationEvent是Event接口的子接口<o:p></o:p>

<o:p></o:p>

Evnet接口定义的属性：<o:p></o:p>

       type<o:p></o:p>

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

       target<o:p></o:p>

                     发生事件的节点，可能与 currentTarget不同。<o:p></o:p>

       eventPhase <o:p></o:p>

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

Event.BUBBLING_PHASE.<o:p></o:p>

       currentTarget <o:p></o:p>

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

       timeStamp <o:p></o:p>

                     一个Date对象，声明事件何时发生<o:p></o:p>

       bubbles <o:p></o:p>

                     一个布尔值，声明该事件是否在文档树中起泡。<o:p></o:p>

       cancelable <o:p></o:p>

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

Evnet接口还定义了2个方法： stopPropagation() 和preventDefault().<o:p></o:p>

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

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

<o:p> </o:p>

UIEvent接口还定义2个的属性：<o:p></o:p>

       view <o:p></o:p>

         发生事件的Window对象（在DOM术语中称为“视图”）<o:p></o:p>

       detail<o:p></o:p>

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

MouseEvent是UIEvent和Event的子接口，它还定义了下列属性：<o:p></o:p>

       button<o:p></o:p>

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

属性只在鼠标键状态改变时用<o:p></o:p>

       altKey、ctrKey、metaKey、shiftKey <o:p></o:p>

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

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

       clientX、clientY <o:p></o:p>

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

       screenX、screenY  <o:p></o:p>

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

       relatedTarget <o:p></o:p>

                     该属性引用与事件的目标节点相关的节点。<o:p></o:p>

<o:p></o:p>

五、IE事件<o:p></o:p>

       IE中的事件起泡：IE事件模型没有2级DOM模型具有的事件捕捉概念，事件可以<o:p></o:p>

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

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

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

       fuction  f(e){…}<o:p></o:p>

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

//不要让事件进一步传播<o:p></o:p>

       If(e.stopPropageation)e. stopPropageation();//2级DOM<o:p></o:p>

<span lang="EN-US" sty