11讲_JavaScript事件分析
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Company name WEB 前端开发技术
HTML JavaScript
CSS WEB 前端开发技术第11章JavaScript 事件分析计算机科学与技术系
Web前端开发技术主要内容
计算机科学与技术系
•掌握事件、事件类型的概念
•掌握事件处理的机制
•掌握事件名称与句柄的关系
•学会编写各类的事件响应程序
计算机科学与技术系
Web前端开发技术11.1 事件编程
事件编程:让用户不仅能够浏览页面中的内容，而且还可以和页面元素进行交互。
事件-事件是可以被JavaScript侦测到的行为(ACTION)。
事件源Window Form Mouse
key
事件
单击事件
双击事件
事件句柄
Onclick
ondblclick
编写事件
处理代码
Web 前端开发技术事件驱动案例导入
计算机科学与技术系
<!--程序edu_11-1_js_event_1.html -->
<html>
<title>事件处理</title>
<head>
<script src="test.js"></script>
</head>
<body onload="show()"
onunload="javascript:alert('关闭窗口');"> <p>你好！这是一个简单事件处理程序！</p> </body>
</html>
计算机科学与技术系Web 前端开发技术11.1 事件编程（续）
1.网页访问中常见的事件鼠标单击：例如单击button 、选中checkbo x 和radio 等元素；鼠标进入、悬浮或退出页面的某个热点：例如鼠标停在一个图片上方或者进入table 的范围；键盘按键：当按下按键或释放按键时；页面或图像载入：例如页面body 被加载时；
在表单中选取输入框或改变输入框中文本的内容：例如选中或修改了文本框中的内容；
确认表单：例如当准备提交表单的内容。
事件类型：
1.鼠标事件
2.键盘事件
3.浏览器事件
计算机科学与技术系
2.主要事件句柄（event handler）
<body>的开始标记中有一个属性叫做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标记中指定
<标记... 事件="事件处理程序" [事件="事件处理程序" ...]
语法说明：
一个元素可以同时指定多个事件处理程序，事件处理程序既可以是<script>标记中的自定义函数，还可以直接将事件处理代码写在此位置。
<input type="button" onclick="createOrder()" v alue="发送教材选购单">
<body onload="alert('网页读取完成！')" onunl oad="alert('再见！')">
计算机科学与技术系
3.2 编写特定对象的特定事件的中指定
<script type=“text/javascript”for=“对象”event=“事件”> //事件处理程序代码
</script>
<script
type=“text/javascript”for=“window”event=“onload”>
alert(“网页读取完成，欢迎光临！”);
</script>
计算机科学与技术系
3.3 事件处理程序也在JavaScript中动态指定。
格式：<事件主角-对象>.<事件>=<事件处理程序>;
“事件处理程序”是真正的代码，而不是字符串形式的代码。
<body>
<form name="myform" method="post" action="" >
<input id="input" type="submit" name="mysubmit" value="提交" onclick="retur n clickHandler()"> </form>
<script type="text/javascript">
function clickHandler()
{ alert("即将提交表单！");
return true; }
myform.mysubmit.onclick();
</script>人为代码触