IE和DOM中的事件对象说明

当在IE浏览器中发生一个事件时，浏览器将会自动创建一个名为"event"的事件对象，在事件处理函数中可以通过访问该对象来获取所发生事件时的各种信息，包括触发事件的HTML元素、鼠标指针位置及鼠标按钮状态等，在IE,event对象实际上又是window对象的一个event属性，因此在代码中可以通过window.event或event形式来访问该对象。

尽管它是window对象的属性，但event对象还是只能在事件发生时被访问，所有的事件处理函数执行完之后，该对象就自动消失了。

而标准DOM中规定event对象必须作为唯一的参数传给事件处理函数，因此在类似Firefox浏览器中访问事件对象通常将其作为参数，代码如下:

oP.onclick=function(oEvent){

}

因此为了兼容这两种浏览器，通常采用下面的方法。

oP.onclick=function(oEvent){

oEvent=oEvent||window.event;

浏览器在获取了事件对象后就可以通过它的一系列属性和方法来处理各种具体事件了，如鼠标事件、键盘事件和浏览器事件等。对于鼠标事件来说，其常用的属性是它的位置信息属性，主要有以下两类。

(1)screenX/screenY:事件发生时，鼠标在计算机屏幕中的坐标。

(2)clientX/cilentY:事件发生时，鼠标在浏览器窗口中的坐标。

通过鼠标的位置属性，可以随时获取到鼠标的位置信息。例如，有些电子商务网站可以将商品用鼠标拖放到购物篮中，这就需要获取鼠标事件的位置，才能让商品跟着鼠标移动。

2.键盘事件对象的应用举例—验证用户输入的是否为数字

如果要判断用户在文本框中输入的内容是否为数字，最简单的办法就是用键盘事件对象来检测按下键的键盘码是否是在48到57之间，当用户按下的不是数字键时，会发现根本无法输入。

3.鼠标事件对象的应用举例—制作跟随鼠标移动的图片放大效果

本例中，当鼠标滑动到某张图片上时，鼠标的旁边就会显示这张图片的放大图片，而且放大的图片会跟随鼠标移动，在整个示例中，原图和放大的图片都采用的是同一张图片，只不过对原图设置了width和height属性，使它缩小显示，而放大图片就显示图片的真实大小，制作步骤如下。

(1)把几张要放大的图片放到一个div容器中，然后再添加一个div的空容器用来放置当鼠标经过时显示的放大图像。

当然，严格来说，把这几幅图片放到一个列表中结构会更清晰些。

(2)写CSS代码，对于img元素来说，只要定义它在小图时的宽和高，并给它添加一条边框以显得美观。对于enlarge_img元素，它应该是一个浮在网页上的绝对定位元素，在默认时不显示，并将它的z-index值设置很大.防止被其他元素遮盖。

(3)对鼠标在图片上移动这一事件对象进行编程。首先获取到img元素，当鼠标滑动到它们上面时，使#enlarge_img元素显示，并且通过innerHTML往该元素中添加一个图像元素作为大图。大图在网页上的纵向位置(即距离页面顶端的距离“top")应该是鼠标到窗口顶端的距离(event.clientY)加上网页滚动过的距离(document.body.scrollTop)。

这样该实例就制作好了，注意JavaScript代码在这里只能放在结构代码的后面，当然可以把这些JavaScript代码作为一个函数放在window.onload事件中。