《JavaScript项目式实例教程》项目四 注册页面设计 —— 事件

项目四注册页面设计 —— 事件设计一个简单的用户注册页面。页面需求如下：填写的信息有姓名、年龄、和城市，且都是必填信息，“城市”文本框只读。
当鼠标移入“姓名”或者“年龄”文本框时，光标自动落入文本框内。当鼠标移入“城市”文本框时，文本框中显示文字“请选择城市”。“年龄”
文本框中只能输入数字，当焦点落在此文本框中时，按非数字键无法键入。点击“请选择城市”下列列表框，可以选择一个城市。当选择了一个城市
后，在“城市”文本框中显示该城市。如果没有填写姓名，点击“提交”按钮提交表单时，会弹出提示框“姓名未填写，不能提交！”。如果没有填
写“年龄”，点击“提交”按钮提交表单时，会弹出提示框“年龄未填写，不能提交！”。如果没有选择城市，点击“提交”按钮提交表单时，则弹
出提示框“城市未选择，不能提交！”。项目情境?理解事件的概念。?掌握事件的触发机制。?掌握常用事件的应用。学习目标点击页面上的“问
候”按钮，弹出两个对话框，分别显示“你好!”和“早上好”。要求不得将事件以及触发代码写在“问候”按钮的标签中，做到代码与标签分离。
任务1 在代码中设置对象处理事件1、为对象事件赋值属性的设置方式：对象.属性=属性的值;为事件设置要触发的行为动作：对象.事件=函
数名称;或者对象.事件=function(){ [函数体];}【相关知识】2、浏览器与事件事件都是由浏览器产生的，而不是由java
script产生的。因此不同的浏览器产生的事件可能不同，就是相同的浏览器不同的版本所产生的事件也有可能不同。因此，对于某个事件在某
个浏览器上能正常运行，但在另一个浏览器上就无效。3、加载和卸载事件加载事件为onload，是指加载（打开）页面完毕时产生的事件，卸
载事件为onunload，是指卸载（关闭、刷新或者跳转到其他页面）网页时产生的事件。另外在卸载页面前还会触发onbeforeunl
oad事件。【相关知识】4、预加载对象处理事件window.onload=function(){ 对象.事件=函数名称;}或者wi
ndow.onload=function(){ 对象.事件=function(){ [函数体];}}【相关知识】在标签
内部输入以下代码： cript type="text/javascript">function hello(){ alert(''你好！''); aler
t(''早上好！'');}bt1.onclick=hello;【任务实现】页面上显示一个“跳转到百度”的超级链接，点
击该链接弹出一个询问是否跳转的对话框，如图4.4所示。如果点击“确定”按钮，浏览器打开百度首页，如果点击“取消”按钮，浏览器不跳转
，仍旧停止本页。任务2 事件处理中的返回值取消事件处理的默认动作【相关知识】1、在页面中制作一个超级链接，标签id为link。代码
如下：跳转到百度【任务实现】2、在 ad>标签对中输入如下JavaScript代码：【任务实现】页面上有一个表单，内部
有一个文本框，一个“提交”按钮。用户必须在文本框中输入姓名，点击“提交”按钮，表单才能提交跳转到ok.html,否则表单不提交。任
务3 表单提交事件对象层次模型【相关知识】1、在页面上设计表单界面，HTML代码如下：

hod="post" action="ok.html"> 姓名： alue="提交">

【任务实现】2、在标签对中输入以下代码：【任务实现】页面上有一张小狗的图片，当鼠标放置到该图片上时，变成另一张小狗的图片；当鼠标移开时，图片恢
复成原来小狗图片；当在图片上单击鼠标左键时，弹出对话框，提示信息“汪汪”。任务4 鼠标事件鼠标事件【相关知识】1、在页面上放置第一
张小狗，HTML代码如下：【任
务实现】2、在标签对中输入以下代码：【任
务实现】页面上有两个文本框，在第一个文本框中每输入一个字符，第二个文本框中就显示该字符对应在键盘上的键码值。第一个文本框中只能输入
5个字符。任务5 键盘事件1、键盘事件【相关知识】2、event事件对象event(事件)对象代表事件状态，如事件发生的元素，键盘
状态，鼠标状态，鼠标位置和鼠标按钮的状态。【相关知识】2.1 event对象兼容性处理IE浏览器有event对象，但是FF火狐浏览
器没有event对象，在该浏览器中，可以通过给函数的参数传递event对象。可以使用以下方法：function 函数名(ev){v
ar oEvent=ev||event;//使用oEvent代替window.event}或者对象=function(ev){va
r oEvent=ev||event;//使用oEvent代替window.event}【相关知识】2.2 event对象属性【相
关知识】（接上表）【相关知识】2.3 event.button的值及其含义【相关知识】1、在页面上设置两个文本框，HTML代码如下
：字符：键码： "text2">【任务实现】2、在标签对中输入以下代码：【任务实现】任务6 “项目四”的实现th
is关键字JavaScript中，this关键字有很多用法，一般指的是当前的对象。比如下列语句中的this指的就是文本框本身。 nput type="text" id="txtname" onMouseDown="this.value=''点击鼠标''">【相关
知识】在本项目中，表单控件得到焦点时，操作鼠标或者敲击键盘都需要检查其中的值，所以需要用到鼠标键盘事件。在年龄文本框中不允许输入非
数字的值以及在条件不符合时不允许提交表单都需要用到事件的返回值。检查键入的年龄是否为数字还要用到event对象。【任务分析】1、在
标签对中编写表单代码：注册

tion="ok.html"> 姓名： 年龄：

请选择城市 北京 上海 n value="广州">广州 e="btn" id="btn" value="提交">

【任务实现】2、在标签对中输入以下
代码：【任务实现】