第九章 事件驱动编程
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2012-6-12
中山大学计算机科学系
4
9.2 事件绑定
事件绑定：是指将一个函数与某个 HTML 元素的 事件属性关联起来，使得当相应事件发生时就会触 发该函数的执行 事件处理程序：使被绑定的函数 事件绑定的两种方法 静态绑定 动态绑定
2012-6-12
中山大学计算机科学系
5
9.2.1 事件属性及其分类
2012-6-12
中山大学计算机科学系
9
9.2.4 绑定多个事件处理函数
一、attachEvent( ) 方法 元素对象的 attachEvent( ) 方法：
object.attachEvent(event_name, function_handler) event_name:事件属性名 function_handler:函数引用
2012-6-12 中山大学计算机科学系 7
9.2.2 静态绑定
静态绑定事件：是指将处理事件的程序代码直接 指定为 HTML 元素的事件属性值。如：
<button name="A1" onclick="alert('先生,您好!')">问侯 先生</button>
函数调用形式：
<button name="A2" onclick="hello_girl()">问侯小姐 </button>
event.returnValue = false； return false;
例9.10
2012-6-12
中山大学计算机科学系
19
9.4.3 鼠标移动
onmousemove:鼠标移动事件 onmouseout:移出元素（鼠标离开）事件 onmouseover:移入元素（鼠标悬停）事件 例9.11 鼠标滑过图像效果
用户动作:用户对页面的鼠标或键盘操作。例如，click、 keypress 等 状态变化：页面的状态发生变化。例如，load、resize、 change 等
2012-6-12
中山大学计算机科学系
2
9.1 基本概念
二、事件驱动 事件驱动：程序的一种执行方式，即响应事件的 发生而执行相关的程序代码片段 在事件驱动执行方式下，程序执行顺序不是完全 按照程序代码从头至尾顺序执行，而是依据事件的 发生顺序而执行 三、事件处理程序 事件处理：是对发生事件进行处理的行为、操作 事件处理程序：是对发生事件进行处理的程序代 码片段
2012-6-12
中山大学计算机科学系
26
9.6.1 访问表单和表单控件
二、访问表单控件 2种访问方法：
2012-6-12
中山大学计算机科学系
23
9.5.3 识别组合键
使用 Event 对象的以下两类属性 keyCode 属性 altKey、ctrlKey 和 shiftKey 属性 例9.14 取消 Ctrl+A 选中全部页面内容
2012-6-12
中山大学计算机科学系
24
9.6 处理表单事件 9.6.1 访问表单和表单控件
2012-6-12
中山大学计算机科学系
17
9.4.2 鼠标点击
一、鼠标点击事件顺序 在 onclick 事件触发前，依次发生 onmousedown、 onmouseup 在 ondblclick 事件触发前，依次发生 onmousedown、onmouseup、onclick、onmouseup 二、使用 Event 对象的 button 属性
例9.1 放置2个按钮，单击显示不同问候语
2012-6-12
中山大学计算机科学系
8
9.2.3 动态绑定
动态绑定事件：是指通过语句建立事件绑定 形式： 对象.事件属性 = 函数引用; 注：对象的事件属性是对函数对象的引用，不能 赋值为字符串 例9.2 放置1个按钮，单击显示一条问候语
function hello() { alert("您好!"); } hello_button.onclick = hello; //动态绑定
wk.baidu.com
例9.7
2012-6-12 中山大学计算机科学系 15
9.3.3 阻止事件的默认行为
默认行为:如单击超链接，鼠标右击页面 取消默认处理的两种方法：
event.returnValue = false； return false;
例9.8 当按下 Shift 键时单击超链接不能显示被 链接的文档
不同点:attachEvent() 可以为对象的同一事件绑 定多个事件处理函数 例9.3 为按钮事件绑定多个事件处理函数
hello_button.onclick=hello1; hello_button.attachEvent("onclick",hello2); hello_button.attachEvent("onclick",hello3); 2012-6-12 中山大学计算机科学系
第九章 事件驱动编程
介绍 JavaScript 事件驱动编程的概念和技术， 以及常用事件的基本使用方法 基本概念 事件绑定 使用事件对象 处理鼠标事件 处理键盘事件 处理表单事件 处理编辑事件 处理异常
2012-6-12 中山大学计算机科学系 1
9.1 基本概念
一、事件 事件是指可以被浏览器识别的、发生在页面上的 用户动作或状态变化。其中：
不使用静态绑定 在 window.onload 事件处理函数中为其他元素动态建 立事件绑定
例9.5
2012-6-12 中山大学计算机科学系 13
9.3 使用事件对象 9.3.1 Event 对象
通过 Event 对象，可以访问事件的发生状态，如 事件名、键盘按键状态、鼠标位置等信息 在 IE 中，通过 window 对象的 event 属性可以 访问 Event 对象 只能在事件处理程序中访问 Event 对象 例9.6
2012-6-12 中山大学计算机科学系 22
9.5.2 识别键盘按键
在键盘事件处理函数中，使用 Event 对象的 keyCode 属性可以识别用户按下哪个键盘键，该属 性值等于用户按下的键盘键对应的 Unicode 键码值 例9.13 显示用户键入的字符 event.repeat 属性表示该事件是否重复
2012-6-12
中山大学计算机科学系
20
9.4.4 鼠标位置
在鼠标事件处理函数中，使用 Event 对象的 x、 y 等位置属性可以获取鼠标指针的当前位置。 例9.12 显示鼠标坐标
2012-6-12
中山大学计算机科学系
21
9.5 处理键盘事件 9.5.1 键盘事件
键盘事件是指用户操作键盘而触发的事件
25
9.6.1 访问表单和表单控件
二、访问表单控件 表单控件对象，包括 Text、TextArea、 Password、Button、Reset、Submit、Radio、 Checkbox、Select、Option 和 Hidden等
属性：id、name、value、defaultvalue、 disabled 、form 等 方法：focus()、blur() 事件：onfocus、onblur
2012-6-12
中山大学计算机科学系
16
9.4 处理鼠标事件 9.4.1 鼠标事件
鼠标事件:是指用户操作鼠标而触发的事件 分类： 鼠标点击事件，包括 onclick、ondblclick、 onmousedown和 onmouseup 鼠标移动事件，包括 onmouseover、 onmousemove和 onmouseout
若为 1，则左键被按下 若为 2，则右键被按下 若为 4，则中键被按下
例9.9 单击鼠标右键不会显示快捷菜单
2012-6-12 中山大学计算机科学系 18
9.4.2 鼠标点击
三、使用 oncontextmenu 事件 右击页面元素将触发 oncontextmenu（上下文菜 单） 事件，显示一个快捷菜单 禁止显示快捷菜单
onkeydown：键按下事件 onkeyup：键弹起事件 onkeypress：按键事件
事件顺序
当点击一次字符键时，依次触发 onkeydown、 onkeypress、onkeyup 事件。若按下不放，则持续触发 onkeydown 和 onkeypress 事件 当点击一次非字符键（如 Ctrl 键）时，依次触发 onkeydown、onkeyup 事件。若按下不放，则持续触发 onkeydown 事件
2012-6-12
中山大学计算机科学系
12
9.2.5 onload 事件
二、绑定至 window 对象 当为 window.onload 事件属性绑定 onload 事件 时，相当于为 <body> 元素绑定相同的事件
解决document.body 对象还未生成的问题
将 onload 事件绑定至 window 对象可以实现 HTML 代码与脚本程序的完全分离,做法:
一、事件属性 使用事件属性可以为元素的指定事件绑定事件处 理程序
事件属性名：在事件名的基础上，加上前缀“on”，如 onclick 查看 HTML 元素的事件属性：“标记属性”窗格
2012-6-12
中山大学计算机科学系
6
9.2.1 事件属性及其分类
二、事件分类
1、页面事件：是指因页面状态发生变化而产生的事件， 包括 onload、onunload、onresize、onabort、 onerror等 2、鼠标事件：是指用户操作鼠标（点击或移动）而触发 的事件，包括 onclick、ondblclick、onmousedown等 3、键盘事件：是指用户在键盘上敲击、输入时触发的事 件，包括 onkeypress、onkeydown、onkeyup等 4、表单事件：是指与表单或表单控件相关的事件，包括 onsubmit、onreset、onchange、onselect、onblur和 onfocus 等
2012-6-12 中山大学计算机科学系 3
9.1 基本概念
四、事件驱动编程 事件驱动编程：是指为需要处理的事件编写相应 的事件处理程序 事件驱动编程的一般步骤：
第1步，确定响应事件的元素 第2步，为指定元素确定需要响应的事件类型 第3步，为指定元素的指定事件编写相应的事件处理程序 第4步，将事件处理程序绑定到指定元素的指定事件
2012-6-12
中山大学计算机科学系
11
9.2.5 onload 事件
一、绑定至 <body> 元素 当 onload 事件发生时，表明浏览器已将当前 HTML 文档装载完成，其脚本可以访问页面中的任意 元素 使用 onload 事件可以避免在 <body> 标签对之 间使用 <script> 块，从而易于实现 HTML 代码与 脚本程序的分离 例9.4
10
9.2.4 绑定多个事件处理函数
二、detachEvent( ) 方法 作用:取消由 attachEvent( ) 建立的事件绑定：
object.detachEvent(event_name, function_handler)
注意:取消由赋值型绑定建立的事件绑定：
对象.事件属性 = null;
一、访问表单对象 <form> 元素定义为 Form 对象：
属性：id、name、action、method、elements 方法：submit()、reset() 事件：onsubmit 、onreset
访问方法
方法1、document.getElementById("myFormId") ; 方法2、document.forms["myFormName"] ; IE 方法： • var myForm=document.myFormName ; • var myForm=myFormName ; 2012-6-12 中山大学计算机科学系
2012-6-12
中山大学计算机科学系
14
9.3.2 事件流
事件流是指事件的冒泡传递过程 源元素→父元素→根对象（即 Document 对象） 由于存在事件流，因此当一个事件发生时，不仅 可以由产生事件的元素响应，也可以由其他元素响 应。
有些事件（如 load、unload、blur、focus 等事件） 不会传递 访问源元素: event.srcElement 阻止事件传递:将event.cancelBubble 赋值为 true