《HTML教程》-7.5-7.6教学材料

下面来分析一下如何实现上面的功能。先列出需要用到的知识点。首先，鼠标进入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标记，然后才是JavaScript代码。这样做的原因是：浏览器引擎在解析网页中的标记（包括sript标记）是按其中文档中出现的顺序进行的。所以如果先编写JavaScript代码，则浏览器先遇到JS代码并解释执行它，而此时还没有解析到HTML代码，所以JS中引用网页元素（HTML标记）的代码就会出现错误。所以这里先写出HTML代码再编写JavaScript代码。7.5.4键盘事件处理下面再给出一个键盘事件的例子。该实例是一个简化版本的键盘打字游戏，只实现了最基本的打字和显示打字结果的功能。大家可以在它的基础上，进行丰富完成一个自己的打字练习游戏。键盘打字游戏功能功能是用户敲击键盘，程序可以识别用户按下的键，并读取其键值再转换成Unicode字符并显示在输出区。同时对应虚拟键盘上的对应字母出现黄色背景并字体变小的动画效果，按下下一键时上一次按下键的动画消失，再次按下的键出现动画效果。并且还能支持Shift输入大写字母。为了简单其见，没有使用图形作为虚拟键盘，而是使用HTML表格作为虚拟键盘。虚拟键盘的HTML代码如下：<tableid="keyboard"> <tr> <td>Q</td><td>W</td><td>E</td><td>R</td><td>T</td> <td>Y</td><td>U</td><td>I</td><td>O</td><td>P</td> </tr><tr> <td>A</td><td>S</td><td>D</td><td>F</td><td>G</td> <td>H</td><td>J</td><td>K</td><td>L</td><td>;</td> </tr> <tr> <td>Z</td><td>X</td><td>C</td><td>V</td><td>B</td> <td>N</td><td>M</td><td>,</td><td>.</td><td>/</td></tr><tr> <tdcolspan="2">©</td> <tdcolspan="6"></td> <tdcolspan="2">©</td> </tr></table>实现打字游戏可以响应keypress事件，读取KeyboardEvent对象的charCode属性获取按下键的Unicode码，并使用String.fromCharCode()函数将获取的Unicode码转换成对应的字符。然后把识别出的字符保存到一个数组中，并把数组的内容显示在输出区就可以了。这里的问题是，表格的单元格无法触发keypress事件，因为不可能将某个单元格获取焦点，再按下键盘上的键。因为事件传播有一个冒泡阶段，可以在单元格的父元素中处理keypress事件，这里选择body作为处理keypress事件的元素。把事件处理器keyboardGame()注册给body元素，代码如下：addEvent(document.body,'keypress',keyboardGame);addEvent()函数的定义如清单7-1（见7.5.1节）所示。事件处理函数keyboardGame()定义如清单7-7所示。首先对使用的变量加以说明，用到的变量如下所示。varstr=newArray();varCOLS=60;varcount=0;vartarget=null;变量str是一个数组，用于存放所有输入的字符。因为要存放输入的所有字符，所以必须声明为全局变量，而不能作为事件处理函数的局部变量，否则只能存放一个字符了。COLS符号常量表示输出区域最多一行存放60个字符。变量count用于统计已输入的字符个数，与COLS变量一起实现一行存放60个字符。变量target用于保存与输入字符相匹配的表格中的单元格，用于恢复它原来的样式。第二是获取事件对象，并通过事件对象的charCode属性获得按下键对应字符的Unicode代码，并通过String.fromCharCode()把Unicode代码转换成对应的字符。对应的代码如下：//以兼容的方式获得事件对象varevt=window.event||e;//读取按下键的值，并转换成对应的Unicode字符。varkey=String.fromCharCode(evt.charCode);第三是处理按键的同时按下Shift的情况。如果按键的同时按下了Shift键，则把输入的字符转换为大写字母。代码如下：//把按下键对应的字符转换成大写varcapKey=key.toUpperCase();//检查是否按下Shift键，若按下则输出大写字母if(evt.shiftKey){ key=capKey;}第四是把已经输入的字符显示在输出区域（div）中。这一功能需要分为以下3个步骤：（1）先把输入的字符添加在数组str的末尾；（2）然后将计数器count加1，如果count是60（COLS=60）的倍数，则在数组str的末尾添加一个回车标记<br/>。（3）通过getElementById()获得id为con的div，调用数组的join()方法，把数组元素（已经输入的所有字符）拼接成以空字符连接的字符串，并赋给获取的div的innerHTML属性，显示在输出div中。代码如下：//（1）把输入的字符添加在已输入字符串的最后str.push(key);//（2）输入字符计数count++;//每输入60个字符，换一行if(count%COLS==0){ str.push("<br/>");}//（3）把输入的字符串显示在div中varcon=document.getElementById('con');con.innerHTML=str.join("");第五步是制作按下键的动画效果。由于表格的单元格无法触发keypress事件，所以也就无法通过KeyboardEvent对象的target（或者IE的srcElement）来获得字符对应的单元格。所以，只能采用遍历所有单元格，检查哪个单元格的内容与输入的字符匹配的方法来确定按下的键对应哪个单元格，然后对这个单元格修改CSS样式，产生动画效果。要实现这一策略，要经过以下两步：（1）通过getElementsByTagName()函数获得网页中所有的td；（2）遍历所有的td并对每个td执行以下操作：a)通过td的firstChild.nodeValue获取td单元格的内容；b)检查单元格的内容是否与输入的字符（已经转换为大写字母）相匹配，如果匹配，则称该td为目标单元格，则修改该td的样式——添加黄色背景和更改字体，并把该td存放在target变量中，以备恢复它的样式。否则什么也不做。详细代码如下：//获取网页中所有的TD标记对应的结点vartds=document.getElementsByTagName('td');//遍历所有TD，查找其内容与按下键相等的TDfor(vari=0;i<tds.length;i++){ varkeyChar=tds[i].firstChild.nodeValue; if(keyChar.toUpperCase()==capKey){ tds[i].style.cssText= "font-size:24px;background:yellow;"; target=tds[i];}}第六步是恢复目标单元格的样式，配合第五步实现动画效果。恢复单元格样式的时机是在上一次事件发生之后，本次事件发生的时候。因为目标单元格已经保存在了target变量中，所以如果target不为空（如果为空，说明本次事件为首次事件），则把它的C