JS中事件和事件处理

 

JS中事件和事件处理

一、事件处理程序：

       在0级中可以这样定义：document.fromName..name.οnclick=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 对象，而不是事件目标元素