下载文档原格式
深入理解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 上面最常用的一类事件，毕竟鼠标还是最主要的定位设备。
那么通过事件对象可以获取到鼠标按钮信息和屏幕坐标获取等。
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的事件机制解释：当我们的⾏为动作满⾜了⼀定的条件后，会触发某事务的执⾏。
内容：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）对象。
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事件处理机制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. 事件代理事件代理是一种技术，可以减少事件处理程序的数量，提高性能。
通过将事件处理程序绑定在父元素上，可以代理子元素的事件。
JavaScript的事件对象中的特殊属性和⽅法（⿏标，键盘）⿏标操作导致的事件对象中的特殊属性和⽅法⿏标事件是 Web 上⾯最常⽤的⼀类事件，毕竟⿏标还是最主要的定位设备。
那么通过事件对象可以获取到⿏标按钮信息和屏幕坐标获取等⿏标按钮只有在主⿏标按钮被单击时(常规⼀般是⿏标左键)才会触发 click 事件，因此检测按钮的信息并不是必要的但对于 mousedown 和 mouseup 事件来说，则在其 event 对象存在⼀个 button 属性，表⽰按下或释放按钮<script type="text/javascript">window.onload = function(){document.onclick = function (evt) {var e = evt || window.event; //实现跨浏览器兼容获取 event 对象alert(e.button);};};</script></head><body><input type="button" value="按钮"/></body>在绝⼤部分情况下，我们最多只使⽤主次中三个单击键，IE 给出的其他组合键⼀般⽆法使⽤上。
所以，我们只需要做上这三种兼容即可。
<script type="text/javascript">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;}}}window.onload = function(){document.onmouseup = function(evt){ //调⽤if(getButton(evt) == 0) {alert('按下了左键！');}else if(getButton(evt) == 1){alert('按下了中键！');}else if(getButton(evt) == 2){alert('按下了右键！' );}};};</script>可视区及屏幕坐标事件对象提供了两组来获取浏览器坐标的属性，⼀组是页⾯可视区左边，另⼀组是屏幕坐标<style>#box{width: 300px;height: 300px;border: 1px solid red;}</style><script type="text/javascript">window.onload = function () {var oDiv = document.getElementById('box')oDiv.onclick = function (evt) {console.log(evt.clientX + ',' + evt.clientY);console.log(evt.screenX + ',' + evt.screenY);};}</script><body><div id="box"></div></body><style type="text/css">#areaDiv {border: 1px solid black;width: 300px;height: 50px;margin-bottom: 10px;}#showMsg {border: 1px solid black;width: 300px;height: 20px;}</style><script type="text/javascript">window.onload = function(){/** 当⿏标在areaDiv中移动时，在showMsg中来显⽰⿏标的坐标*///获取两个divvar areaDiv = document.getElementById("areaDiv");var showMsg = document.getElementById("showMsg");/** onmousemove* - 该事件将会在⿏标在元素中移动时被触发** 事件对象* - 当事件的响应函数被触发时，浏览器每次都会将⼀个事件对象作为实参传递进响应函数,* 在事件对象中封装了当前事件相关的⼀切信息，⽐如：⿏标的坐标键盘哪个按键被按下⿏标滚轮滚动的⽅向。
JavaScript事件处理知识点JavaScript是一种广泛应用于网页中的脚本语言，可以为网页添加各种交互功能，并对用户的操作做出响应。
事件处理是JavaScript编程的关键部分之一，本文将介绍JavaScript事件处理的一些重要知识点，包括事件概念、事件类型、事件处理程序等。
一、事件概念事件是指用户或浏览器执行的某种动作或操作，例如点击鼠标、按下键盘、加载页面等。
JavaScript可以通过事件监听器来捕捉这些事件，并在事件触发时执行相应的代码。
二、事件类型JavaScript支持多种事件类型，可以根据具体需求选择合适的事件类型。
常见的事件类型包括：1. 鼠标事件：- click：鼠标点击事件- mouseover：鼠标滑入事件- mouseout：鼠标滑出事件- ...2. 键盘事件：- keydown：键盘按下事件- keyup：键盘松开事件- keypress：键盘按键事件- ...3. 表单事件：- submit：表单提交事件- change：表单元素值改变事件 - focus：表单元素获得焦点事件 - ...4. 文档加载事件：- load：文档加载完成事件- unload：文档卸载事件- ...5. 其他事件：- resize：窗口大小改变事件- scroll：滚动事件- ...三、事件处理程序事件处理程序是一段JavaScript代码，用于处理特定事件的发生。
可以通过以下几种方式将事件处理程序绑定到相应的HTML元素上：1. HTML事件处理属性：可以在HTML元素上直接添加事件处理属性，例如：```html<button onclick="myFunction()">点击我</button>```2. DOM属性赋值：使用JavaScript代码将事件处理程序赋值给DOM元素的属性，例如：```javascriptconst button = document.querySelector('button');button.onclick = function() {// 事件处理程序代码};```3. addEventListener方法：使用addEventListener方法为DOM元素添加事件监听器，例如： ```javascriptconst button = document.querySelector('button');button.addEventListener('click', function() {// 事件处理程序代码});```注意：使用addEventListener方法可以同时为一个元素添加多个相同类型的事件处理程序，并且能够更方便地移除事件监听器。
