当前位置:
搜档网 › 11讲_JavaScript事件分析
11讲_JavaScript事件分析
Company name
WEB 前端开发技术
HTML JavaScript
CSS
WEB 前端开发技术
第11章JavaScript 事件分析
计算机科学与技术系
Web前端开发技术主要内容
计算机科学与技术系
?掌握事件、事件类型的概念
?掌握事件处理的机制
?掌握事件名称与句柄的关系
?学会编写各类的事件响应程序
计算机科学与技术系
Web前端开发技术11.1 事件编程
事件编程:让用户不仅能够浏览页面中的内容,而且还可以和页面元素进行交互。
事件-事件是可以被JavaScript侦测到的行为(ACTION)。
事件源Window Form Mouse
key
事件
单击事件
双击事件
事件句柄
Onclick
ondblclick
编写事件
处理代码
Web 前端开发技术事件驱动案例导入
计算机科学与技术系
事件处理onunload="javascript:alert('关闭窗口');">
你好!这是一个简单事件处理程序!
计算机科学与技术系
Web 前端开发技术
11.1 事件编程(续)
1.网页访问中常见的事件
鼠标单击:例如单击button 、选中checkbo x 和radio 等元素;鼠标进入、悬浮或退出页面的某个热点:例如鼠标停在一个图片上方或者进入table 的范围;
键盘按键:当按下按键或释放按键时;页面或图像载入:例如页面body 被加载时;在表单中选取输入框或改变输入框中文本的内容:例如选中或修改了文本框中的内容;确认表单:例如当准备提交表单的内容。
事件类型:1.鼠标事件2.键盘事件3.浏览器事件
计算机科学与技术系
2.主要事件句柄(event handler)
的开始标记中有一个属性叫做onload,
对onload所赋的值就是show()函数。
onload属性就是我们所说的事件句柄。
格式:onload=“show();”
事件句柄
事件处理函数
事件句柄:onabort、onblur 、onchange 、onclick 、ondblcl ick 、onabort、onerror、onkeydown、onkeypress、onkeyu p、onload、onmousedown、onmousemove、onmouseou
计算机科学与技术系
3. 指定事件处理程序的方法:
3.1 直接在HTML标记中指定
<标记... 事件="事件处理程序" [事件="事件处理程序" ...]
语法说明:
一个元素可以同时指定多个事件处理程序,事件处理程序既可以是
计算机科学与技术系
3.3 事件处理程序也在JavaScript中动态指定。
格式:<事件主角-对象>.<事件>=<事件处理程序>;
“事件处理程序”是真正的代码,而不是字符串形式的代码。
function clickHandler()
{ alert("即将提交表单!");
return true; }
myform.mysubmit.onclick();
人为代码触
计算机科学与技术系
事件处理程序的返回值
在JavaScript中通常事件处理程序不需要有返回值,这时浏览器会按默认方式进行处理;
很多情况下需要使用返回值,来判断事件处理程序是否正确进行处理。
返回值类型:boolean布尔型值
浏览器下一步操作:返回值为true,进行默认操作;返回值为false,阻止浏览器的下一步操作。
使用方式:事件名="return 函数名(参数)"
onclick="return clickHandler()"
计算机科学与技术系
Web 前端开发技术
11. 2 表单事件
Form 表单是网页设计是一种重要的和用户进行交互的工具,它用于采集用户输入各类信息。
表11-1 事件句柄和事件的对照事件分类事件句柄事件
表单元素事件
onchange 当元素改变时执行脚本onsubmit
当表单被提交时执行脚本
onreset 当表单被重置时执行脚本onselect 当元素被选取时执行脚本onblur 当元素失去焦点时执行脚本onfocus
当元素获得焦点时执行脚本
edu_11-4_js_form_event.html
计算机科学与技术系
Web 前端开发技术
计算机科学与技术系
function checklogin(){
var username=document.getElementById("myname").value;
var pwd=document.getElementById("mypwd").value;
var checkright=true;
if (username=="" || pwd=="")//两者中有一个为空
{
alert("请确认用户名和密码输入是否正确!!");
checkright=false;
}else{
if (pwd.length<6)
{
alert("请确认密码长度太短,至少5个字符!!");
checkright=false; }}
return checkright;
}
计算机科学与技术系
表11-2 事件句柄和事件的对照
事件分类事件句柄事件
鼠标事件onclick当鼠标被单击时执行脚本
ondblclick当鼠标被双击时执行脚本
onmousedown当鼠标按钮被按下时执行脚本
onmousemove当鼠标指针移动时执行脚本
onmouseout当鼠标指针移出某元素时执行脚本
onmouseover当鼠标指针悬停于某元素之上时执行脚本
onmouseup当鼠标按钮被松开时执行脚本
edu_11-5_js_form_event.html
计算机科学与技术系
var obj= document.getElementById("mybody");
function mover(){
var obj= document.getElementById("mybody");
obj.style.background="#99cc66";}
function mout(){
var obj= document.getElementById("mybody");
obj.style.background="#ff33ff";}
function mmove(){
var obj= document.getElementById("mybody");
obj.style.background="#0033ff";}
function mdown(){
form1.mtext.value="按下鼠标";}
function mclick(){
form1.mtext.value="单击鼠标";}
function mdclick(){
form1.mtext.value="双击鼠标";}
计算机科学与技术系
onMouseOut="mout()" onMouseMove="mmove()"
onclick="mclick();" onmousedown="mdown()"
ondblclick="mdclick();" >
鼠标事件处理
Web前端开发技术11.4 键盘事件
计算机科学与技术系
表11-11 事件句柄和事件的对照
事件分类事件句柄事件
键盘事件onkeydown当键盘被按下时执行脚本
onkeypress当键盘被按下后又松开时执行脚本
onkeyup当键盘被松开时执行脚本
通过window的event对象的keyCode属性情来获取按键代码的值,其中:回车:13,0~9:48~57;Aa~Zz:65~90;
使用方法:window.event.keyCode或event.keyCode。
edu_11-6_js_form_keyboard_event.html
Web 前端开发技术11.4 键盘事件案例
计算机科学与技术系
function k_press(){
if (window.event.keyCode==13)
{ alert("你的学号为:"+myform.s_no.value); } if (event.keyCode<48 || event.keyCode>57)
{ alert("你输入学号错误!");}
}
Web前端开发技术11.5 页面载入和离开
计算机科学与技术系
如果希望在页面加载或者转换到其他页面时刻,做些工作,那么就可以利用onload和onunload两个事件,这两个事件和
及