1.理解鼠标、键盘事件的触发机制.2.掌握鼠标的MouseDown,
深入理解DOM事件类型系列第一篇——鼠标事件
深入理解DOM事件类型系列第一篇——鼠标事件深入理解DOM事件类型系列第一篇——鼠标事件前面的话鼠标事件是web开发中最常用的一类事件，毕竟鼠标是最主要的定位设备。
本文将详细介绍鼠标事件的内容类型鼠标事件共10类，包括click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter和mouseleaveclick当用户按下并释放鼠标按键或其他方式“激活”元素时触发contextmenu可以取消的事件，当上下文菜单即将出现时触发。
当前浏览器在鼠标右击时显示上下文菜单dblclick当用户双击鼠标时触发mousedown当用户按下鼠标按键时触发mouseup当用户释放鼠标按键时触发mousemove当用户移动鼠标时触发mouseover当鼠标进入元素时触发。
relatedTarget(在IE中是fromElement)指的是鼠标来自的元素mouseout当鼠标离开元素时触发。
relatedTarget(在IE中是toElement)指的是鼠标要去往的元素mouseenter类似mouseover，但不冒泡。
IE将其引入，HTML5将其标准化，但尚未广泛实现mouseleave类似mouseout，但不冒泡。
IE将其引入，HTML5将其标准化，但尚未广泛实现冒泡页面上的所有元素都支持鼠标事件，除了mouseenter和mouseleave事件外，所有的鼠标事件都会冒泡[注意]safari浏览器不支持mouseenter和mouseleave事件顺序【1】鼠标移入时，触发mouseover、mouseenter和mousemove事件IE浏览器会先触发一次mousemove事件，再触发mouseover 和mouseenter事件，再触发多次mousemove事件而其他浏览器都是先触发mouseover和mouseenter事件，再触发多次mousemove事件还原【2】鼠标移出时，触发mousemove、mouseleave和mouseout事件所有浏览器的顺序都是(1)mousemove、(2)mouseout和(3)mouseleave事件还原【3】双击鼠标时，触发mousedown、mouseup、click、dblclick事件一般地，浏览器的顺序是(1)mousedown、(2)mouseup、(3)click、(4)mousedown、(5)mouseup、(6)click、(7)dblclick但IE8-浏览器有一个小bug，在双击事件中，它会跳过第二个mousedown和click事件，顺序为(1)mousedown、(2)mouseup、(3)click、(4)mouseup、(5)dblclick还原【4】点击鼠标右键时，触发mousedown、mouseup、contextmenu事件一般地，浏览器的顺序是(1)mousedown、(2)mouseup、(3)contextmenu但safari浏览器有一个小bug，它不触发mouseup事件，顺序为(1)mousedown、(2)contextmenu还原【5】嵌套元素的移入移出时，触发mouseover、mouseenter、mouseleave、mouseout事件从父级元素进入子级元素时，顺序为:(1)父级元素的mouseout、(2)子级元素的mouseover、(3)父级元素的mouseover、(4)子级元素的mouseenter从子级元素进入父级元素时，顺序为:(1)子级元素的mouseout、(2)父级元素的mouseout、(3)子级元素的mouseleave、(4)父级元素的mouseover还原从上面的结果可以看出mouseover、mouseout和mouseleave 和mouseenter事件的区别1、mouseover、mouseout是冒泡的，而mouseleave和mouseenter是不冒泡的2、从父级元素进入子级元素时，不会触发父级元素的mouseleave事件3、从子级元素进入父级元素时，不会触发父级元素的mouseenter事件事件对象鼠标事件对象提供了丰富的信息，接下来将按照功能分类介绍坐标位置关于坐标位置，事件对象提供了clientX/Y、pageX/Y、screenX/Y、x/y、offsetX/Y、layerX/Y这6对信息clientX/Y与x/yclientX/Y表示鼠标指针在可视区域中的水平和垂直坐标x/y与clientX/Y相同，但有兼容问题。
web前端培训教程：鼠标事件
web前端培训教程：鼠标事件鼠标事件是Web 上面最常用的一类事件，毕竟鼠标还是最主要的定位设备。
那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等。
1.鼠标按钮只有在主鼠标按钮被单击时(常规一般是鼠标左键)才会触发click 事件，因此检测按钮的信息并不是必要的。
但对于mousedown 和mouseup 事件来说，则在其event 对象存在一个button 属性，表示按下或释放按钮。
PS：在绝大部分情况下，我们最多只使用主次中三个单击键，IE 给出的其他组合键一般无法使用上。
所以，我们只需要做上这三种兼容即可。
function getButton(evt) { //跨浏览器左中右键单击相应var e = evt || window.event; if (evt) { //Chrome 浏览器支持W3C 和IEreturn e.button; //要注意判断顺序} else if (window.event) {switch(e.button) {case 1 :return 0;case 4 :return 1;case 2 :return 2;}}}document.onmouseup = function (evt) { //调用if (getButton(evt) == 0) {alert('按下了左键！');} else if (getButton(evt) == 1) { alert('按下了中键！');} else if (getButton(evt) == 2) {alert('按下了右键！' );}};2.可视区及屏幕坐标事件对象提供了两组来获取浏览器坐标的属性，一组是页面可视区左边，另一组是屏幕坐标。
document.onclick = function (evt) {var e = evt || window.event;alert(e.clientX + ',' + e.clientY);alert(e.screenX + ',' + e.screenY);};3.修改键有时，我们需要通过键盘上的某些键来配合鼠标来触发一些特殊的事件。
js的事件机制
js的事件机制js的事件机制解释：当我们的⾏为动作满⾜了⼀定的条件后，会触发某事务的执⾏。
内容：1.单双击事件 单击：onclick 当⿏标单击时候会触发 双击：ondbclick 当⿏标双击时候会触发2.⿏标事件 onmouserover 当⿏标悬停在某个HTML元素上的时候触发 onmousermove 当⿏标在某个HTML元素上移动的时候触发 onmouseout 当⿏标在某个HTML元素上移除的时候触发3.键盘事件 onkeyup 当⿏标在某个HTML元素上弹起的时候触发 onkeydown 当⿏标在某个HTML元素上下压的时候触发4.焦点事件 onfocus 当某个HTML元素获取焦点的时候触发 onblur 当某个HTML元素失去焦点的时候触发5.页⾯加载事件 onload 当页⾯加载成功后注意: js中添加事件的第⼀种⽅式： 在HTML上直接使⽤事件操作进⾏添加，操作值为监听的函数。
js中的事件只有在当前HTML元素中有效。
⼀个HTML元素可以添加多个不同的事件。
⼀个事件可以触发多个函数的执⾏，但是不同的函数要使⽤分号隔开。
实现代码<h3>js的单击事件机制</h3><hr /><input type="button" id="" value="单击事件" onclick="testOnclick()"/><input type="button" id="" value="单击事件" onclick="testdbclick()"/><hr /><br /><div id="showdiv" onmouseover="testOnmouseover();" onmousemove="testOnmousemove();" onmouseout="testOnmouseout();"></div><hr />键盘事件学习：<br />键盘弹起事件： <input type="text" name="" id="" value="" onkeyup="testOnkeyup();"/><br />键盘下压事件： <input type="text" name="" id="" value="" onkeyup="testOnkeydown()"/><hr />焦点事件学习：<hr />获取焦点：<input type="text" name="" id="" value="" onfocus="testOnfocus();"/>失去焦点：<input type="text" name="" id="" value="" onfocus="testOnblur()"/>。
键盘和鼠标使用技巧
第四节键盘和鼠标使用技巧一、响应键盘事件ＶB提供了3种键盘事件，即：KeyDown事件：按下键盘上的任意键KeyUp事件：释放键盘的任意键KeyPress事件：按下对应某ASCII字符的键1、焦点处理：只有获得焦点的窗体或控件才能够接受键盘事件，所以在处理键盘事件前，应该首先对焦点进行处理。
设置控件焦点主要有两种方法：在程序运行时通过鼠标选择操作或控件的SetFocus 方法实现在程序设计阶段预先设置控件的TabIndex属性，然后在运行期通过按Tab键实现控件焦点的移动。
(1)SetFocus方法：控件名.SetFocus(2)利用Tab键控制：在程序运行时通过Tab健使焦点按TabIndex的值，从小到大切换。
2、KeyDown事件和KeyUp事件按下键盘上的任意一个键，就会引发当前具有焦点的对象的KeyDown事件。
释放时，则会引发该对象的KeyUp事件。
①Keycode参数KeyCode参数是一个整数，返回所按键的键码值。
键码值是以“键”为准。
例如，由于大写字母和小写字母使用同一键，因此“A”和“a”的键码值是相同的。
又如大键盘上的数字“1”和小建盘上的数字“1”，虽然是同一数字，但由于键不同，它们的键码值也不相同。
②Shift参数Shift参数是一个整数值，返回Shift、Ctrl、Alt的状态。
只有检查此状态才能判断输入的是大写还是小写字母。
Shift参数用来判断是否按下了键盘上的Shift、Ctrl和Alt，或这3个键的任意组合，其对应的关系如表4-2所示：表中Shift的取值和Shift、Ctrl和Alt组合状态的对应关系。
表4-2符号常数Shift的取值Shift、Ctrl和Alt组合状态- 0 三个键都没有VbShiftMask 1 按下Shift键VbCtrlMask 2 按下Ctrl键VbShiftMask+ VbCtrlMask 3 同时按下Shift键和Ctrl键VbAltMask 4 按下Alt键VbShiftMask+ VbAltMask 5 同时按下Shift键和Alt键VbCtrlMask + VbAltMask 6 同时按下Ctrl键和Alt键VbShiftMask+ VbCtrlMask+ VbAltMask 7 同时按下三个键3、KeyPress事件按下键盘上与ASCII字符对应的键时，触发KeyPress事件。
事件触发机制
事件（event）是一个非常重要的概念，我们的程序时刻都在触发和接收着各种事件：鼠标点击事件，键盘事件，以及处理操作系统的各种事件。
所谓事件就是由某个对象发出的消息。
比如用户按下了某个按钮，某个文件发生了改变，socket 上有数据到达。
触发事件的对象称作发送者（sender），捕获事件并且做出响应的对象称作接收者（receiver），一个事件可以存在多个接受者。
在异步机制中，事件是线程之间进行通信的一个非常常用的方式。
比如：用户在界面上按下一个按钮，执行某项耗时的任务。
程序此时启动一个线程来处理这个任务，用户界面上显示一个进度条指示用户任务执行的状态。
这个功能就可以使用事件来进行处理。
可以将处理任务的类作为消息的发送者，任务开始时，发出“TaskStart”事件，任务进行中的不同时刻发出“TaskDoing”事件，并且携带参数说明任务进行的比例，任务结束的时候发出“TaskDone”事件，在画面中接收并且处理这些事件。
这样实现了功能，并且界面和后台执行任务的模块耦合程度也是最低的。
具体说C#语言，事件的实现依赖于“代理”（delegate）的概念，先了解一下代理。
代理（delegate）delegate是C#中的一种类型，它实际上是一个能够持有对某个方法的引用的类。
与其它的类不同，delegate类能够拥有一个签名（signature），并且它只能持有与它的签名相匹配的方法的引用。
它所实现的功能与C/C++中的函数指针十分相似。
它允许你传递一个类A的方法m给另一个类B的对象，使得类B的对象能够调用这个方法m。
但与函数指针相比，delegate有许多函数指针不具备的优点。
首先，函数指针只能指向静态函数，而delegate既可以引用静态函数，又可以引用非静态成员函数。
在引用非静态成员函数时，delegate不但保存了对此函数入口指针的引用，而且还保存了调用此函数的类实例的引用。
其次，与函数指针相比，delegate是面向对象、类型安全、可靠的受控（managed）对象。
14_行为
显示弹出式菜单:必须做在链接上. 检查插件:检查客户端是否安装了某些插 件,可根据其设置浏览的页面 检查表单:检查用户的表单页面. 设置导航栏图片:必须用在图片上,须命 名,与鼠标经过图像类似 设置文本:常用来设置状态栏的文本
调用javascript Window.location.reload() Window.close() Location.href='URL'
为对象附加行为
可以将行为附加给整个文档,链接,图像, 表单元素或其他HTML对象
内置行为
交换图像:当触发某事件时,更换图片(须命 名) 弹出信息:当触发某事件时,弹出提示信 息 恢复交换图像:当触发某事件时,恢复交 换图像,常与交换图像同时使用 打开浏览器窗口:当触发某事件时,打开 一个浏览器窗口,可以对其大小等进行设 置
�
拖动层:可以设置层在页面中自由的拖动 控制shockweva和flash:当触发某事件时, 控制其播放和停止.
插入声音:当触发某事件时,播放声音 改变属性:当触发某事件时,更改某对象 的属性,如图片,图片须命名 时间轴:当触发某事件时,停止或播放时 间轴 显示与隐藏层:当触发某事件时,显示与 隐藏层
行为
概述
Dreamweaver行为是一种运行在浏览器中 的javascript代码,设计者可以将其放置在网 页文档中,以允许浏览者与网页本身进行交 互. 行为由事件和由该事件触发动作组成.
认识事件
行为是事件与动作的联合,事件用于指明执行某 项动作的条件.常用事件包含有鼠标事件,键盘 事件,窗口事件和其它事件等.常见如下: onClick:单击选定元素(如链接,图片,按钮)触发 事件. onMouseover:当鼠标经过特定对象触发事件. onMouseOut:当鼠标离开对象边界时触发事件. onLoad:当页面或图片完成入后触发事件. onMouseDown:当按下鼠标按钮时触发该事件.
JavaScript常见鼠标事件与用法分析
JavaScript常见⿏标事件与⽤法分析JavaScript ⿏标事件有以下8种mousedown⿏标的键钮被按下。
mouseup⿏标的键钮释放弹起。
click⿏标左键（或中键）被单击。
事件触发顺序是：mousedown -> mouseup -> clickdblclick⿏标左键（或中键）被双击。
事件触发顺序是：mousedown -> mouseup -> click -> mousedown -> mouseup -> click -> dblclick。
contextmenu弹出右键菜单，它可能是⿏标右键触发的，也可能是键盘的菜单键触发的。
mouseover⿏标移动到⽬标上⽅。
mouseout⿏标从⽬标上⽅移出。
mousemove⿏标在⽬标上⽅移动注意：事件名称⼤⼩写敏感。
若需要监听以上事件，则在事件名的前⾯加个on即可。
事件区别onmouseover、nmouseout：⿏标移动到⾃⾝时候会触发事件，同时移动到其⼦元素⾝上也会触发事件onmouseenter、onmouseleave：⿏标移动到⾃⾝是会触发事件，但是移动到其⼦元素⾝上不会触发事件全局事件对象eventevent.x事件发⽣时⿏标的位置event.y事件发⽣时⿏标的位置button⿏标的哪⼀个键触发的事件⿏标左键1⿏标中键2⿏标右键代码范例123 4 5 6 7 8 9 10 11 12<html><body><script type="text/javascript">function appendText(str) {document.body.innerHTML += str + "<br/>";}document.onmousedown = function() {appendText("onmousedown");appendText("button = "+ event.button);appendText("(x,y) = "+ event.x + ","+ event.y); }12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 }document.onmouseup = function() {appendText("onmouseup");}document.onclick = function() {appendText("onclick");}document.ondblclick = function() {appendText("ondblclick");}document.oncontextmenu = function() { appendText("oncontextmenu");}document.onmouseover = function() { appendText("onmouseover");}document.onmouseout = function() { appendText("onmouseout");}document.onmousemove = function() { appendText("mousemove");}</script></body></html>。
js事件处理机制
js事件处理机制JavaScript是一种流行的编程语言，广泛运用于现代Web应用程序中。
事件处理机制是JavaScript中一个重要的方面，可以使你的应用程序对用户的交互做出动态响应。
本文将介绍JavaScript事件处理机制，包括事件类型、事件处理程序、事件冒泡和捕获以及事件代理。
1. 事件类型JavaScript可以处理各种类型的事件，包括鼠标操作、键盘操作、窗口操作等，还可以自定义事件。
其中，鼠标事件包括click、dblclick、mousedown、mouseup等；键盘事件包括keydown、keyup、keypress等；窗口事件包括load、unload、resize、scroll等。
2. 事件处理程序当事件发生时，浏览器会自动寻找相应的事件处理程序来执行。
可以通过以下方法指定事件处理程序：（1）HTML事件处理程序：在HTML元素中添加事件属性，如onclick、onload等。
（2）DOM0级事件处理程序：通过JavaScript代码指定事件处理程序，如element.onclick=function(){}。
（3）DOM2级事件处理程序：通过addEventListener方法指定事件处理程序，如element.addEventListener('click', function(){}, false)。
3. 事件冒泡和捕获当一个事件被触发时，它会从事件目标（通常是页面中的元素）开始，沿着DOM树向上传播，可以称之为事件冒泡。
而事件捕获则是从根节点到事件目标的过程。
DOM2级事件定义了两种处理事件的方式：事件冒泡和事件捕获。
默认情况下，事件处理程序会在事件冒泡阶段被触发，但可以通过设置addEventListener方法的第三个参数为true，将事件处理程序绑定在事件捕获阶段。
4. 事件代理事件代理是一种技术，可以减少事件处理程序的数量，提高性能。
通过将事件处理程序绑定在父元素上，可以代理子元素的事件。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
现代教育技术中心
12.1 键盘事件
keycode 参数通过 ASCII 值或键代码常数来识别键。字 母键的键代码与此字母的大写字符的 ASCII 值相同。所以 "A" 和 "a" 的 keycode 都是由 Asc("A") 返回的数值。在下 例中用 KeyDown 事件判断是否按下了 "A" 键：
KeyUp 和 KeyDown 事件过程的语法格式如下：
Sub Object_KeyDown(KeyCode As Integer, Shift As Integer)
Sub Object_KeyUp(KeyCode As Integer, Shift As Integer) 说明： 1．Keycode 参数表示按下的物理键。上档键字符和下档键 字符也是使用同一键，它们的Keycode值相同。 Visual Basic程序设计教学课件
KeyPress 按下对应某ASCII 字符的键。
KeyDown 按下键盘的任意键。 KeyUp 释放键盘的任意键只有获得焦点的对象才能够接 受键盘事件。 12.1.1 KeyPress 事件 在按下与ASCII字符对应的键时将触发KeyPress 事件。
Visual Basic程序设计教学课件
现代教育技术中心
12.2 鼠标事件
大多数控件能够识别鼠标的 MouseMove 、 MouseDown 和 MouseUp事件，通过响应这些鼠标事件，能在应用程序对鼠 标位置及状态的变化作出响应操作。 MouseMove 每当鼠标指针移动到屏幕新位置时发生
MouseDown
Mo： 理解鼠标、键盘事件的触发机制运用
本章难点： 事件驱动的拖放和 OLE 的拖放
Visual Basic程序设计教学课件
现代教育技术中心
12.1 键盘事件
在Visual Basic中，提供KeyPress、KeyDown、KeyUp三种 键盘事件，窗体和接受键盘输入的控件都识别这三种事件。
现代教育技术中心
12.1 键盘事件
2．shift参数 shift 表示是在该事件发生时响应SHIFT、CTRL 和 ALT 键 的状态，它是一个整数。其含义与上一节中 MouseMove 、 MouseDown、MouseUp事件中的shift参数完全相同。 例如：下例是用Shift参数判断是否按下了字母的大写形式。 Private Sub Text1_KeyDown(KeyCode As Integer, Shift As Integer) If KeyCode = vbKeyA And Shift = 1 Then
Private Sub Text1_KeyPress (KeyAscii As Integer)
Select Case KeyAscii Case 48 to 57,46,8,13
Case Else KeyAscii=0 End Select End Sub
KeyPress 事件只识别 Enter、Tab和Backspace 键。不能 够检测其它功能键、编辑键和定位键。 Visual Basic程序设计教学课件
MsgBox “你按了大写字母A键."
End if End Sub
Visual Basic程序设计教学课件
现代教育技术中心
12.1 键盘事件
思考题： 编写一个在文本框（ Text1 ）中操作，能够响应键 盘组合操作的程序，用户所作的每一步操作都将在标签框
（Label1）中显示出相关信息。
Visual Basic程序设计教学课件
现代教育技术中心
12.1 键盘事件
KeyPress 事件过程的语法格式是： Sub Object_KeyPress (KeyAscii As Integer) 其中： Object是指窗体或控件对象名，KeyAscii 参数返回对应 于ASCII字符代码的整型数值。 例如，如果希望将文本框中的所有字符都强制转换为大写 字符，则可在输入时使用此事件转换大小写：
现代教育技术中心
12.1.2 KeyDown 和 KeyUp 事件
当一个对象具有焦点时按下（KeyDown） 或松开 ( KeyUp ) 一个键时发生。它们报告键盘本身准确的物理状 态：按下键 (KeyDown) 及松开键 (KeyUp)。 KeyDown和KeyUp事件能够检测其它功能键、编辑键和定 位键。
第12章 键盘与鼠标事件过程
本章要求：
1. 理解鼠标、键盘事件的触发机制。
2. 掌握鼠标的MouseDown， MouseMove， MouseUp 事件中各参数的含义及编程控制。 3. 掌握键盘的KeyDown， KeyPress， KeyUp 事件中各 参数的含义及编程控制 4. 了解事件驱动的拖放和 OLE 的拖放。
Visual Basic程序设计教学课件
现代教育技术中心
12.1 键盘事件
Private Sub Text1_KeyDown(KeyCode As _ Integer, Shift As Integer) If KeyCode = vbKeyA Then MsgBox "You pressed the A key.“ End if End Sub Private Sub Text1_KeyDown(KeyCode As _ Integer, Shift As Integer) If KeyCode = vbKey1 And shift=1 Then MsgBox "You pressed the ! key.“ End if End Sub Visual Basic程序设计教学课件
Private Sub Text1_KeyPress (KeyAscii As Integer)
KeyAscii = Asc(Ucase(Chr(KeyAscii))) End Sub Visual Basic程序设计教学课件
现代教育技术中心
12.1 键盘事件
例12.1 通过编程序，在一个文本框（Text1）中限定只能 输入数字、小数点，只能响应BackSpace 键及回车键。