讲JavaScript事件分析

1、Company name WEB前端开发技术 HTML JavaScript CSS WEB前端 开发技术 2021/3/10授课：XXX 页1/28 第11章 JavaScript事件分析 计算机科学与技术系 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 2 主要内容 掌握事件、事件类型的概念 掌握事件处理的机制 掌握事件名称与句柄的关系 学会编写各类的事件响应程序 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 3 11.1 事件编程 事件编程:让用户不仅能够浏览页面中的内容，而且还 可以和页面元素进行交互。 事件-事件是可以被Java

2、Script侦测到的行为(ACTION)。 事件源 Window Form Mouse key 事件 单击事件 双击事件 事件句柄 Onclick ondblclick 编写事件 处理代码 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 4 事件驱动案例导入 事件处理事件处理 你好！这是一个简单事件处理程序！你好！这是一个简单事件处理程序！ edu_11-1_js_event_1.html 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 5 11.1 事件编程（续） 1.网页访问中常见的事件 鼠标单击：例如单击button、选中checkbo

3、 x和radio等元素；鼠标进入、悬浮或退出页 面的某个热点：例如鼠标停在一个图片上方 或者进入table的范围； 键盘按键：当按下按键或释放按键时； 页面或图像载入：例如页面body被加载时； 在表单中选取输入框或改变输入框中文本的 内容：例如选中或修改了文本框中的内容； 确认表单：例如当准备提交表单的内容。 事件类型： 1.鼠标事件 2.键盘事件 3.浏览器事 件 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 6 11.1 事件简介(续) 2.主要事件句柄 （event handler） 的开始标记中有一个属性叫做onload， 对onload所赋的值就是sho

4、w()函数。 onload属性就是我们所说的事件句柄。 格式： onload=“show();” 事件处理函数 事件句柄 事件句柄：onabort、onblur 、onchange 、onclick 、ondblcl ick 、onabort、onerror、onkeydown、onkeypress、onkeyu p、onload、onmousedown、onmousemove、onmouseou t、onreset、onresize、onselect、onsubmit。 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 7 11.1 事件简介(续) 3. 指定事件处理

5、程序的方法： 3.1 直接在HTML标记中指定 标记 . 事件=事件处理程序 事件=事件处理程序 . 语法说明： 一个元素可以同时指定多个事件处理程序，事件 处理程序既可以是标记中的自定义函数，还 可以直接将事件处理代码写在此位置。 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 8 11.1 事件简介(续) 3.2 编写特定对象的特定事件的中指定 /事件处理程序代码 alert(“网页读取完成，欢迎光临！”); edu_11-2_js_event_2.html 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 9 11.1 事件简介(续) 3

6、.3 事件处理程序也在JavaScript中动态指定。 格式：.=; “事件处理程序”是真正的代码，而不是字符串形式的代码。 function clickHandler() alert(即将提交表单！); return true; myform.mysubmit.onclick(); 人为代码触 发事件 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 10 11.1 事件简介(续) 事件处理程序的返回值 在JavaScript中通常事件处理程序不需要有返 回值，这时浏览器会按默认方式进行处理； 很多情况下需要使用返回值，来判断事件处理 程序是否正确进行处理。 返回值类

7、型：boolean布尔型值 浏览器下一步操作：返回值为true，进行默认 操作； 返回值为 false，阻止浏览器的下一步操作。 使用方式：事件名=return 函数名（参数） onclick=return clickHandler() 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 11 11. 2 表单事件 Form表单是网页设计是一种重要的和用户进 行交互的工具，它用于采集用户输入各类信息。 表11-1 事件句柄和事件的对照 事件分类事件句柄事件 表单元素 事件 onchange当元素改变时执行脚本 onsubmit当表单被提交时执行脚本 onreset 当表单

8、被重置时执行脚本 onselect当元素被选取时执行脚本 onblur当元素失去焦点时执行脚本 onfocus当元素获得焦点时执行脚本 edu_11-4_js_form_event.html 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 12 用户登录用户登录 用户名用户名 密密码码 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 13 11. 2 表单事件 function checklogin() var username=document.getElementById(myname).value; var pwd=document.g

9、etElementById(mypwd).value; var checkright=true; if (username= | pwd=) /两者中有一个为空两者中有一个为空 alert(请确认用户名和密码输入是否正确！请确认用户名和密码输入是否正确！); checkright=false; else if (pwd.length6) alert(请确认密码长度太短，至少请确认密码长度太短，至少5个字符！个字符！); checkright=false; return checkright; 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 14 11.3 鼠标事件 表

10、11-2 事件句柄和事件的对照 事件分类事件句柄事件 鼠标事件onclick当鼠标被单击时执行脚本 ondblclick当鼠标被双击时执行脚本 onmousedown当鼠标按钮被按下时执行脚本 onmousemove当鼠标指针移动时执行脚本 onmouseout当鼠标指针移出某元素时执行脚本 onmouseover当鼠标指针悬停于某元素之上时执行脚本 onmouseup当鼠标按钮被松开时执行脚本 edu_11-5_js_form_event.html 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 15 11.3 鼠标事件案例 var obj= document.ge

11、tElementById(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 mdo

12、wn() form1.mtext.value=按下鼠标按下鼠标; function mclick() form1.mtext.value=单击鼠标单击鼠标; function mdclick() form1.mtext.value=双击鼠标双击鼠标; 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 16 11.3 鼠标事件案例 鼠标事件处理鼠标事件处理 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 17 11.4 键盘事件 表11-11 事件句柄和事件的对照 事件分类事件句柄事件 键盘事件onkeydown当键盘被按下时执行脚本 onkey

13、press当键盘被按下后又松开时执行脚本 onkeyup当键盘被松开时执行脚本 通过 window的event对象的keyCode属性情来获取按键代 码的值，其中：回车：13，09：4857;AaZz:6590; 使用方法：window.event.keyCode或event.keyCode。 edu_11-6_js_form_keyboard_event.html 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 18 11.4 键盘事件案例 function k_press() if (window.event.keyCode=13) alert(你的学号为：+myform.s_no.value); if (event.keyCode57) alert(你输入学号错误！); 学号： 姓名： 计算机科学与技术系 Web前端开发技术 2021/3/10 授课：XXX 19 11.5 页面载入和离开 如果希望在页面加载或者转换到其他页面时刻， 做些工作，那么就可以利用onload和onunload两 个事件，这两