《HTML教程》_7.5-7.6教学材料.pptxVIP

下面来分析一下如何实现上面的功能。先列出需要用到的知识点。首先，鼠标进入div触发的事件有mouseover、mouseenter事件（见7.2节），可以选择处理这两个事件改变div的背景和边框。只需要处理其中一个事件即可。

其次，鼠标移动时触发mousemove事件（见7.2节），可以处理目标div的这个事件输出鼠标指针位置和事件发生时间。第三，鼠标离开时触发mouseout、mouseleave事件（见7.2节），可以选择处理这两个事件，显示鼠标离开时指针的坐标和事件发生的时间。只需要处理其中一个事件即可。

第四，修改元素div的背景和边框需要用到控制元素样式的知识（见6.6.3节）。第五，显示鼠标指针位置X坐标和Y坐标，以及事件发生的时间需要用到MouseEvent事件对象（见7.3.2节），其中clientX和clientY表示事件发生时鼠标的位置（X和Y坐标），timeStamp属性表示事件发生的时间，以一个长整型的整数表示，需要转换成我们熟知的时间格式。

第六，要处理事件，必须注册事件处理函数。注册事件处理函数的关键是兼容两种事件处理模型（见7.5.1节）。第七，要用到事件对象，最关键也是兼容两种事件模型（见7.5.1节）。上面七点是我们实现这一功能所用到的知识点，这里并没有列出所有需要的知识点，如变量声明、控制结构，函数声明等等。

下面来看一下，这些功能是如何实现的。通过对实例功能的分析，需要实现以下功能：◆设置/添加div的黄色背景；◆设置/添加红色粗线边框；◆显示事件发生的时间以及鼠标指针的位置。◆取消/删除div的黄色背景；◆取消/删除div的红色粗线边框。

先来看一下添加div黄色背景的实现。要对div添加背景，首先要获得要添加背景的这个div。鼠标要进入或者离开这个div，那它就可以看作是事件源。通过事件对象的target属性（IE事件对象中为srcElement属性）就可以获得事件发生的事件源，也就是要设置背景的div。

根据清单7-3，获取事件对象和事件源的兼容性方法如下：//获取事件对象evt varevt=eventObj||window.event; //获取对象的事件源 varelem=evt.srcElement||evt.target;

获取到事件源，也就是要设置背景的元素对象之后，就是要为它设置CSS样式，设置CSS样式的方法很多（见6.6.3节），这里采用最为简单的设置style的backgroundColor属性来实现，代码如下：elem.style.backgroundColor=yellow;

也可以使用设置style的cssText来实现，代码如下：elem.style.cssText=background-color:yellow;;最后就是显示鼠标的坐标位置和事件发生的时间，读取事件对象的clientX，clientY和timeStamp属性并构造成X=+evt.clientX+,Y=+evt.clientY+,br/+时间戳=+(newDate(evt.timeStamp))

这种格式的字符串，赋给事件源元素的innerHTML属性即可，代码如下：msg.innerHTML=X=+evt.clientX +,Y=+evt.clientY+,br/ +时间戳=+(newDate(evt.timeStamp));其中msg为显示信息div对应的变量，也就是div的元素对象。

设置背景的完整代码如下所示。functionsetBg(eventObj){ varevt=eventObj||window.event; varelem=evt.srcElement||evt.target; elem.style.backgroundColor=yellow; msg.innerHTML=X=+evt.clientX +,Y=+evt.clientY+,br/ +时间戳=+(newDate(evt.timeStamp));}

其他3个功能——设置边框、取消背景和取消边框——与此类似，不再分析其实现过程，也不再单独列出其源代码。实例的完整代码如清单7-6所示。这里省略了设置两个divCSS样式的代码，详细代码见随书源代码的Listing7-4.html文件中，它位置于第7章文件夹中。

运行效果如图7-2所示图7-2鼠标事件实例运行效果

注意这个实例代码并没有按习惯上的JavaScript代码在前，HTML标记在后的写法，而是先写出了HTML标记，然后才是JavaS