湖北职院计科系
教学目标 1、了解JavaScript事件处理的基本概念 2、理解JavaScript事件处理模型 上一页 下一页
教学重点 1、理解JavaScript事件处理模型 2、掌握JavaScript常用事件处理 上一页 下一页
教学难点 1、掌握JavaScript常用事件及处理 上一页 下一页
教学方法 1、项目工程互动式教学法 2、“讲、学、观察”相结合 上一页 下一页
一、事件处理的基本概念 1、事件是浏览器响应用户交互操作的一种机制，利用javascript事件处理机制可以开发出更加具有交互性，更易使用的Web页面。 2、事件定义了用户与Web页面交互时产生的各种操作。浏览器在大部分时间都等待交互事件的发生，并在事件发生时，自动调用事件处理函数，完成事件处理过程。 上一页 下一页
<BODY onload="alert('欢迎访问我的主页！')"> 欢迎访问我的主页！ </BODY> 二、浏览器事件及处理 1、项目案例1－欢迎访问 <BODY onload="alert('欢迎访问我的主页！')"> 欢迎访问我的主页！ </BODY> load事件：发生在浏览器完成网页的加载之后。 上一页 下一页
2、项目案例2－计算用户在网页上的停留时间。 <BODY onunload="stay()"> <script language="Javascript"> pageOpen = new Date(); function stay() { pageClose = new Date(); minutes = (pageClose.getMinutes() - pageOpen.getMinutes()); seconds = (pageClose.getSeconds() - pageOpen.getSeconds()); time = (seconds + (minutes * 60));time = (time + " 秒钟"); alert('您在这儿停留了' + time + '.欢迎下次再来!'); } </script> </BODY> unload事件：发生在浏览器载入新网页之前。 上一页 下一页
<script language="javascript"> function checkit() { //数据验证函数 3、项目案例3－表单校验 <script language="javascript"> function checkit() { //数据验证函数 var strval = document.myform.mytext.value; var intval = parseInt(strval); if(0 < intval && intval < 10) { alert("提交成功！"); return true; } </script> <form name="myform" method="post" onsubmit="checkit()"> submit事件：发生在提交表单数据给服务器处理时。 上一页 下一页
<SCRIPT language="javascript"> var timeout; function load( ) { 三、鼠标事件及处理 1、项目案例1－自动跳转 <SCRIPT language="javascript"> var timeout; function load( ) { timeout=setTimeout("navigate('index.html')",3000); } function mousemove( ) { clearTimeout(timeout); </SCRIPT> <BODY onmousemove="mousemove()" onload="load()"> MouseMove事件：发生在移动鼠标的时候。 上一页 下一页
<script language="JavaScript"> function show( ) { 2、项目案例2－图片的显示与隐藏 <script language="JavaScript"> function show( ) { pic.filters.alpha.opacity=100; } function fade( ) { pic.filters.alpha.opacity=0; </script> <img src="pic08.gif“ name="pic“ style="filter:alpha(opacity=0)" onmouseover="show()" onmouseout="fade()"> MouseOver事件：发生在鼠标扫过一个界面对象时。 MouseOut事件：鼠标扫过并脱离一个界面对象时发生。 上一页 下一页
<script language=javascript> function hello_girl( ) { 3、项目案例3－问候 <script language=javascript> function hello_girl( ) { alert("小姐,您好!"); } function hello_boy( ) { alert("先生，你好！"); </script> <INPUT type="button" value="问侯先生" name="hello1" onclick="hello_boy();"> <INPUT type="button" value="问侯小姐" name="hello2" onclick="hello_girl();"> Click事件：发生在表单上某个对象被单击时。 上一页 下一页
KeyDown事件：在键盘上按下一个键的时候发生。 四、键盘事件及处理 1、项目案例1－键盘事件 <form> 看看你的浏览器的状态栏: <input type="text" onKeyDown="window.status='你按下了一个键'" onKeyUp="window.status='你又松开了这个键'"> </form> KeyDown事件：在键盘上按下一个键的时候发生。 KeyUp事件：在键盘上松开一个键的时候发生。 上一页 下一页
<script language="javascript"> function change() { 五、其他事件及处理 1、项目案例1－Change事件 <script language="javascript"> function change() { var curform = document.all.myform; curform.money.value=curform.country.options[curform.country.selectedIndex].value; } </script> <select name="country" onchange="change()"> <option value="7.80">美元</option> <option value="12.00">英镑</option> <option value="10.00">欧元</option> <option value="0.30">日元</option> </select> Change事件：文本输入框失去焦点，同时其中的值发生改变时。 上一页 下一页
<script language="javascript"> function sel( ) { 2、项目案例2－select事件 <script language="javascript"> function sel( ) { var curform = document.all.myform; alert("该外汇的汇率是1比"+curform.money.value); } </script> 一元这样的外币可以兑换 <input type="text" name="money" value="" onselect="sel()"> 元人民币 Select事件：选定文本输入框的一段文本后 上一页 下一页
【小结】 通过本次课的学习，同学们熟悉了JavaScript事件处理基本概念，理解了JavaScript事件处理模型，掌握了利用JavaScript事件及处理机制编写更具交互性的、更易使用的Web页面。 【作业】 要求大家在课余时间多多练习今天所学的内容。 上一页 下一页
谢 谢 ！