JavaScript程序设计课件：第五章 事件和事件处理.ppt

高等学校计算机应用人才培养系列教材 5.* 第五章 事件和事件处理 本章结构 理解事件 处理事件 JavaScript中的事件处理 事件对象 理解事件 事件概述 事件是浏览器响应用户操作的机制，说明了用户与Web页面交互时产生的操作。 事件可以向浏览器表明有操作发生，需要浏览器处理。 浏览器可以监听事件，在事件发生时做出反应，进行相应的处理工作。这种监听、响应事件并进行处理的过程被称为事件处理。 有些事件可以被浏览器自动监听，由浏览器自动触发，例如：窗体的load事件。 有些事件是用来执行某段代码以响应用户请求的，由人工编写程序进行定义的，当特定的事件发生时，执行这个事件对应的代码，以完成预期的事件处理。 理解事件 事件类型 JavaScript支持大量的事件类型，而且针对不同对象，同一操作也会产生不同的事件结果。 HTML组件 JavaScript事件 链接 Click Dbclick mouseDown mouseUp mouseOver mouseOut keyDown keyUp keyPress HTML组件 JavaScript事件 单行文本域 blur focus change select 按钮 click blur focus mouseDown mouseUp HTML组件 JavaScript事件 重置 click blur focus 单选按钮 click blur focus 复选框 click blur focus 部分JavaScript事件 理解事件 事件处理器 当事件发生时，程序就会执行用于响应事件的JavaScript代码，响应特定事件的代码被称为事件处理器。 事件处理器的代码包含在相应的HTML标记里面，作为该标记的属性，其语法格式如下： HTML标签 事件处理器名称 = “JavaScript代码” 事件处理器名称与事件本身的名称大体相同，只是在事件名称前面加上了“on”，例如click事件的事件处理器为onClick。 一个完整的例子： input type = “button” value = “click me” onClick = “alert(‘您点击按钮了！’)” 理解事件 事件处理器的属性 事件处理属性 相应代码的执行 onAbort 取消图片的加载 onBlur 文档、窗口、框架或表单元素失去当前输入焦点 onChange 文本框、文本域、文件上传或选项被修改或失去当前输入焦点 onClick 链接、客户端图片区域或表单元素被点击 onDbClick 链接、客户端图片区域或文档被双击 onDragDrop 在窗口或框架中拖拽某个对象 onError 在图片、窗口或框架加载时出错 onFocus 文档、窗口、框架或表单元素得到当前输入焦点 onKeyDown 用户按下按钮 onKeyPress 用户按下并释放键 onKeyUp 用户释放键 onLoad 加载图片、文档或框架 事件处理属性 相应代码的执行 onMouseDown 用户移动鼠标 onMouseMove 鼠标从客户端图片区域的链接区域移出 onMouseOut 鼠标移到客户端图片区域的链接区域 onMouseOver 用户释放鼠标按钮 onMouseUp 用户按下鼠标按钮 onMove 用户移动窗口或框架 onReset 用户点击表单重置按钮，重置表单 onResize 用户调整窗口或框架大小 onSelect 在文本框或文本域中选择文本 onSubmit 提交表单 onUnload 用户退出文档或框架 处理事件 通过HTML属性处理事件 事件处理器是作为HTML的属性值来表示和应用的，例如： input type = “button” value = “click me” onClick = “alert(‘您点击按钮了！’)” 除了直接使用JavaScript代码串，更好的方法是通过事件处理器调用函数，通过函数完成事件处理。 script language=JavaScript function printMessage(message) { alert(message); } /script input type = button value = 通过函数输出信息按钮 onClick = printMessage(点击按钮后先调用函数，通过函数输出信息！) 定义函数 调用函数 处理事件 通过JavaScript属性处理事件 将事件处理器作为JavaScript的属性，使程序像操