Transcript 第十九节JS事件处理
Slide 1
项目十九 javascript事件处理
教学目标
教学重点
教学目标
1、了解JavaScript事件处理的基本概念
2、理解JavaScript事件处理模型
3、掌握JavaScript常用事件及处理
教学难点
教学方法
教学过程
上一页
下一页
Slide 2
项目十九 javascript事件处理
教学目标
教学重点
教学重点
1、理解JavaScript事件处理模型
2、掌握JavaScript常用事件处理
教学难点
教学方法
教学过程
上一页
下一页
Slide 3
项目十九 javascript事件处理
教学目标
教学难点
教学重点
1、掌握JavaScript常用事件及处理
教学难点
教学方法
教学过程
上一页
下一页
Slide 4
项目十九 javascript事件处理
教学目标
教学重点
教学方法
1、项目工程互动式教学法
2、“讲、学、观察”相结合
教学难点
教学方法
教学过程
上一页
下一页
Slide 5
项目十九 javascript事件处理
教学目标
教学重点
教学难点
教学方法
一、事件处理的基本概念
1、事件是浏览器响应用户交互操作的一种机制，
利用javascript事件处理机制可以开发出更加
具有交互性，更易使用的Web页面。
2、事件定义了用户与Web页面交互时产生的各
种操作。浏览器在大部分时间都等待交互事件
的发生，并在事件发生时，自动调用事件处理
函数，完成事件处理过程。
教学过程
上一页
下一页
Slide 6
项目十九 javascript事件处理
二、浏览器事件及处理
教学目标
教学重点
1、项目案例1－欢迎访问
欢迎访问我的主页！
load事件：发生在浏览器完
成网页的加载之后。
教学难点
教学方法
教学过程
上一页
下一页
Slide 7
项目十九 javascript事件处理
教学目标
教学重点
教学难点
教学方法
教学过程
2、项目案例2－计算用户在网页上的停留时间。
<script language="Javascript">
unload事件：发生在浏览器载入
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 + '.欢迎下次再来!');
}
上一页
下一页
Slide 8
项目十九 javascript事件处理
教学目标
教学重点
教学难点
教学方法
3、项目案例3－表单校验
<script language="javascript">
function checkit() { //数据验证函数
var strval = document.myform.mytext.value;
var intval = parseInt(strval);
submit事件：发生在提交表单数据给
if(0 < intval && intval
< 10) {
服务器处理时。
alert("提交成功！");
return true;
}
}
KeyUp事件：在键盘上松开一个
键的时候发生。
教学方法
教学过程
上一页
下一页
Slide 13
项目十九 javascript事件处理
教学目标
教学重点
教学难点
教学方法
教学过程
五、其他事件及处理
1、项目案例1－Change事件
<script language="javascript">
function change() {
var curform = document.all.myform;
Change事件：文本输入框失
curform.money.value=curform.country.options[curform.cou
去焦点，同时其中的值发生
ntry.selectedIndex].value;
改变时。
}
上一页
下一页
Slide 14
项目十九 javascript事件处理
教学目标
教学重点
教学难点
教学方法
2、项目案例2－select事件
<script language="javascript">
function sel( ) {
var curform = document.all.myform;
Select事件：选定文本输入框的
alert("该外汇的汇率是1比"+curform.money.value);
一段文本后
}
一元这样的外币可以兑换
onselect="sel()">
元人民币
教学过程
上一页
下一页
Slide 15
项目十九 javascript事件处理
教学目标
教学重点
教学难点
【小结】
通过本次课的学习，同学们熟悉了JavaScript事件处理
基本概念，理解了JavaScript事件处理模型，掌握了利用
JavaScript事件及处理机制编写更具交互性的、更易使用
的Web页面。
【作业】
要求大家在课余时间多多练习今天所学的内容。
教学方法
教学过程
上一页
下一页
Slide 16
谢
谢 ！
项目十九 javascript事件处理
教学目标
教学重点
教学目标
1、了解JavaScript事件处理的基本概念
2、理解JavaScript事件处理模型
3、掌握JavaScript常用事件及处理
教学难点
教学方法
教学过程
上一页
下一页
Slide 2
项目十九 javascript事件处理
教学目标
教学重点
教学重点
1、理解JavaScript事件处理模型
2、掌握JavaScript常用事件处理
教学难点
教学方法
教学过程
上一页
下一页
Slide 3
项目十九 javascript事件处理
教学目标
教学难点
教学重点
1、掌握JavaScript常用事件及处理
教学难点
教学方法
教学过程
上一页
下一页
Slide 4
项目十九 javascript事件处理
教学目标
教学重点
教学方法
1、项目工程互动式教学法
2、“讲、学、观察”相结合
教学难点
教学方法
教学过程
上一页
下一页
Slide 5
项目十九 javascript事件处理
教学目标
教学重点
教学难点
教学方法
一、事件处理的基本概念
1、事件是浏览器响应用户交互操作的一种机制，
利用javascript事件处理机制可以开发出更加
具有交互性，更易使用的Web页面。
2、事件定义了用户与Web页面交互时产生的各
种操作。浏览器在大部分时间都等待交互事件
的发生，并在事件发生时，自动调用事件处理
函数，完成事件处理过程。
教学过程
上一页
下一页
Slide 6
项目十九 javascript事件处理
二、浏览器事件及处理
教学目标
教学重点
1、项目案例1－欢迎访问
欢迎访问我的主页！
load事件：发生在浏览器完
成网页的加载之后。
教学难点
教学方法
教学过程
上一页
下一页
Slide 7
项目十九 javascript事件处理
教学目标
教学重点
教学难点
教学方法
教学过程
2、项目案例2－计算用户在网页上的停留时间。
<script language="Javascript">
unload事件：发生在浏览器载入
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 + '.欢迎下次再来!');
}
上一页
下一页
Slide 8
项目十九 javascript事件处理
教学目标
教学重点
教学难点
教学方法
3、项目案例3－表单校验
<script language="javascript">
function checkit() { //数据验证函数
var strval = document.myform.mytext.value;
var intval = parseInt(strval);
submit事件：发生在提交表单数据给
if(0 < intval && intval
< 10) {
服务器处理时。
alert("提交成功！");
return true;
}
}
KeyUp事件：在键盘上松开一个
键的时候发生。
教学方法
教学过程
上一页
下一页
Slide 13
项目十九 javascript事件处理
教学目标
教学重点
教学难点
教学方法
教学过程
五、其他事件及处理
1、项目案例1－Change事件
<script language="javascript">
function change() {
var curform = document.all.myform;
Change事件：文本输入框失
curform.money.value=curform.country.options[curform.cou
去焦点，同时其中的值发生
ntry.selectedIndex].value;
改变时。
}
上一页
下一页
Slide 14
项目十九 javascript事件处理
教学目标
教学重点
教学难点
教学方法
2、项目案例2－select事件
<script language="javascript">
function sel( ) {
var curform = document.all.myform;
Select事件：选定文本输入框的
alert("该外汇的汇率是1比"+curform.money.value);
一段文本后
}
一元这样的外币可以兑换
onselect="sel()">
元人民币
教学过程
上一页
下一页
Slide 15
项目十九 javascript事件处理
教学目标
教学重点
教学难点
【小结】
通过本次课的学习，同学们熟悉了JavaScript事件处理
基本概念，理解了JavaScript事件处理模型，掌握了利用
JavaScript事件及处理机制编写更具交互性的、更易使用
的Web页面。
【作业】
要求大家在课余时间多多练习今天所学的内容。
教学方法
教学过程
上一页
下一页
Slide 16
谢
谢 ！