Company name WEB 前端开发技术HTML JavaScriptCSS WEB 前端开发技术第11章JavaScript 事件分析计算机科学与技术系Web前端开发技术主要内容计算机科学与技术系•掌握事件、事件类型的概念•掌握事件处理的机制•掌握事件名称与句柄的关系•学会编写各类的事件响应程序计算机科学与技术系Web前端开发技术11.1 事件编程事件编程:让用户不仅能够浏览页面中的内容，而且还可以和页面元素进行交互。
事件-事件是可以被JavaScript侦测到的行为(ACTION)。
事件源Window Form Mousekey事件单击事件双击事件事件句柄Onclickondblclick编写事件处理代码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><scripttype=“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>人为代码触计算机科学与技术系事件处理程序的返回值在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 前端开发技术<body><form name="loginform" method="post" action="loginindex.html" onsubmit="return checklogin()"><fieldset><legend>用户登录</legend><br><br><label>用户名</label><input type="text" name="" id="myname"><br><br><label>密 码</label><input type="password" name="" id="mypwd"maxlength="8"><br><br><br><input type="submit" value="提交"><input type="reset"></fieldset></form></body>计算机科学与技术系<script type="text/javascript">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;}</script>计算机科学与技术系表11-2 事件句柄和事件的对照事件分类事件句柄事件鼠标事件onclick当鼠标被单击时执行脚本ondblclick当鼠标被双击时执行脚本onmousedown当鼠标按钮被按下时执行脚本onmousemove当鼠标指针移动时执行脚本onmouseout当鼠标指针移出某元素时执行脚本onmouseover当鼠标指针悬停于某元素之上时执行脚本onmouseup当鼠标按钮被松开时执行脚本edu_11-5_js_form_event.html计算机科学与技术系<script type="text/javascript">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="双击鼠标";}计算机科学与技术系<body ><div id="mybody" onmouseOver="mover()"onMouseOut="mout()" onMouseMove="mmove()"onclick="mclick();" onmousedown="mdown()"ondblclick="mdclick();" ><h3 align="center">鼠标事件处理</h3><hr color="red" size="3"><form name="form1" method="post" action=""><input type="text" name="" id="mtext"></form></div></body>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。