[JS]DOM和IE中的Event---简要总结

前几天巩固了Event事件，现在做一下总结以便以后参考。

一、DOM事件模型

DOM标准描述了一个Event对象，提供了触发事件的元素信息，并允许在脚本中获取该元素。

1.访问事件对象

DOM事件模型中，将Event对象引用传给处理事件，如：

<p onclick=“displayType(event)”>Hello<p>

<script>

function displayType(e){alert(e.type);}

</script>

/*点击段落，将会有警示框弹出，显示当前的事件：click*/

在onclick属性中，将event对象传给函数displayType()。event变量没有在任何地方定义，只有通过HTML属性连接的事件处理程序才能使用这个参数，在触发事件时，它传送了当前事件对象的引用。

 2.事件对象属性

···Event对象的属性：

bubbles：表示是否允许事件冒泡；

cancleable：表示是否取消事件的默认行为；

currentTarget：表示当前处理的事件处理程序的事件目标；

target：该属性表示引发事件的元素。在DOM模型中，文本节点也可能是target；

type：该属性表示事件的名称。

eventPhase：表示事件流当前处于哪个阶段；

timestamp：表示事件发生的时间。

另外DOM事件模型还引入了MouseEvent对象，专门用来处理鼠标引发的事件。

MouseEvent对象可以访问Event和MouseEvent对象的属性。

···MouseEvent对象：

click，dbclick，mousedown，mouseup，mouseover，mouseout，mousemove

···MouseEvent对象的属性：

altKey，  ctrlKey，  metaKey，  shiftKey ：这四个属性分别表示事件发生时，是否按下相应的键（Alt，Ctrl，meta，Shift）；

button：表示按下鼠标的哪个按钮；

clientX，clientY：分别表示事件发生时，鼠标指针在浏览器窗口中的水平坐标，垂直坐标；

screenX，screenY：分别表示事件发生时，鼠标指针相对于屏幕坐标原点的水平坐标，垂直坐标；

relatedTarget：表示第二个事件目标。对于mouseover事件，该属性表示鼠标指针退出的元素；对于mouseout，则表示鼠标指针进入的元素。

以上是DOM事件模型，下面来记录一下IE中的事件模型。

 二、IE中的事件处理

由于IE没有实现DOM事件模型，所以IE中通过window.event来访问事件，是window对象的一个属性，存在于每个打开的浏览器窗口中。每次用户引发事件时都会更新event对象。

1.访问event对象

由于event对象是全局的，所以不需要像DOM事件模型中把对象传送给处理函数，也不需要再event前加上window前缀。如：

<p onclick=“displayType()”>Hello<p>

<script>

function displayType(){alert(event.type);}

</script>

/*点击段落，将会有警示框弹出，显示当前的事件：click*/

2.event事件属性

IE的event对象的属性不同于DOM标准的Event与MouseEvent对象，但提供的数据类似。

首先，与DOM标准中相同的对象属性有：

altKey，  ctrlKey，  metaKey，  shiftKey ：这四个属性分别表示事件发生时，是否按下相应的键（Alt，Ctrl，meta，Shift）；

button：表示按下鼠标的哪个按钮；

clientX，clientY：分别表示事件发生时，鼠标指针在浏览器窗口中的水平坐标，垂直坐标；

screenX，screenY：分别表示事件发生时，在浏览器窗口中鼠标指针相对于屏幕坐标原点的水平坐标，垂直坐标；

button：表示按下鼠标的哪个按钮；

type：获取事件的名称；

另外，IE的event事件属性还有：

srcElement：获取引发事件的元素对象；

fromElement：获取鼠标指针退出时的元素对象；

toElement：获取鼠标指针进入的元素对象；

cancleBubble：获取或设置当前事件是否冒泡；

keyCode：获取与引发事件的键相关的Unicode键码。

三、DOM事件模型与IE事件模型之间的区别

DOM事件模型与IE事件模型之间的主要区别是事件信息的访问方式，以及获取引发事件的元素的方式。

DOM是需要传送事件引用给处理函数，IE中直接通过全局的event访问；

DOM中获取获取引发事件的元素对象是通过tarfet属性，而IE是通过srcElement属性。

四、如何跨浏览器的访问Event

function handleEvent(e){

 var eSrc;

   if(window.event)

  {

     e = window.event;

     eSrc = event.srcElement;

   }

  else

  {

     eSrc = e.target;

   }

 //more code;

}

/*首先定义eSrc来接收引发事件的元素引用，如果存在window.event，那么浏览器是IE，设置e为window.event的引用，方便使用共享事件的属性*/