（中职）JavaScript项目式实例教程项目四电子课件工信版

（中职）JavaScript项目式实例教程项目四电子课件工信版 项目四 注册页面设计 —— 事件  JavaScript项目式实例教程 设计一个简单的用户注册页面。页面需求如下： 填写的信息有姓名、年龄、和城市，且都是必填信息，“城市”文本框只读。当鼠标移入“姓名”或者“年龄”文本框时，光标自动落入文本框内。当鼠标移入“城市”文本框时，文本框中显示文字“请选择城市”。“年龄”文本框中只能输入数字，当焦点落在此文本框中时，按非数字键无法键入。点击“请选择城市”下列列表框，可以选择一个城市。当选择了一个城市后，在“城市”文本框中显示该城市。 如果没有填写姓名，点击“提交”按钮提交表单时，会弹出提示框“姓名未填写，不能提交！”。如果没有填写“年龄”，点击“提交”按钮提交表单时，会弹出提示框“年龄未填写，不能提交！”。如果没有选择城市，点击“提交”按钮提交表单时，则弹出提示框“城市未选择，不能提交！”。 项目情境  JavaScript项目式实例教程 理解事件的概念。 掌握事件的触发机制。 掌握常用事件的应用。 学习目标  JavaScript项目式实例教程 点击页面上的“问候”按钮，弹出两个对话框，分别显示“你好!”和“早上好”。要求不得将事件以及触发代码写在“问候”按钮的标签中，做到代码与标签分离。 任务1 在代码中设置对象处理事件  JavaScript项目式实例教程 1、为对象事件赋值 属性的设置方式： 对象.属性=属性的值; 为事件设置要触发的行为动作： 对象.事件=函数名称; 或者 对象.事件=function() { [函数体]; } 【相关知识】  JavaScript项目式实例教程 2、浏览器与事件 事件都是由浏览器产生的，而不是由javascript产生的。因此不同的浏览器产生的事件可能不同，就是相同的浏览器不同的版本所产生的事件也有可能不同。因此，对于某个事件在某个浏览器上能正常运行，但在另一个浏览器上就无效。 3、加载和卸载事件 加载事件为onload，是指加载（打开）页面完毕时产生的事件，卸载事件为onunload，是指卸载（关闭、刷新或者跳转到其他页面）网页时产生的事件。另外在卸载页面前还会触发onbeforeunload事件。 【相关知识】  JavaScript项目式实例教程 4、预加载对象处理事件 window.onload=function() { 对象.事件=函数名称; } 或者 window.onload=function() { 对象.事件=function() { [函数体]; } } 【相关知识】  JavaScript项目式实例教程 在<body>标签内部输入以下代码： <input type="button" name="bt1" id="bt1" value="问候" /> <script type="text/javascript"> function hello() { alert('你好！'); alert('早上好！'); } bt1.onclick=hello; </script> 【任务实现】  JavaScript项目式实例教程 页面上显示一个“跳转到百度”的超级链接，点击该链接弹出一个询问是否跳转的对话框，如图4.4所示。如果点击“确定”按钮，浏览器打开百度首页，如果点击“取消”按钮，浏览器不跳转，仍旧停止本页。 任务2 事件处理中的返回值  JavaScript项目式实例教程 取消事件处理的默认动作 【相关知识】 元素 事件 描述 <a> onclick 单击跳转到元素的href属性指定的URL <form> onsubmit、onreset 提交表单、重置表单 document oncontextmenu 单击鼠标右键可以显示一个快捷菜单  JavaScript项目式实例教程 1、在页面中制作一个超级链接，标签id为link。代码如下： <a id="link" href="http://www.baidu.com">跳转到百度</a> 【任务实现】  JavaScript项目式实例教程 2、在<head>标签对中输入如下JavaScript代码： <script type="text/javascript"> window.onload=function() { link.onclick=function() { var sel=confirm("真的要跳转吗？") if(!sel) { return false; } } } </script> 【任务实现】  JavaScript项目式实例教程 页面上有一个表单，内部有一个文本框，一个“提交”按钮。用户必须在文本框中输