Javascript（十二）javascript 事件详解

ゝ一纸荒年。 2022-05-17 05:50 269阅读 0赞

# 一、事件定义 #

1.  关于事件实际上我们已经初步接触过了，指的就是用户与浏览器交互的一瞬间。
2.  我们通过为指定事件绑定回调函数的形式来处理事 件，当指定事件触发以后我们的回调函数就会被调用，这样我们的页面就可以完成和用户的交互了。
3.  这里还要更加深入的聊一聊事件的其他内容。

# 二、事件处理程序 #

• 我们可以通过两种方式为一个元素绑定事件处理程序:

1.  通过HTML元素指定事件属性来绑定
2.   通过DOM对象指定的属性来绑定

• 这两种方式都是我们日常用的比较多的，但是更推荐使 用第二种方式。

• 还有一种方式比较特殊我们称为设置事件监听器。使用 如下方式:

\-元素对象.addEventListener()

## 2.1、通过HTML标签的属性设置 ##

*  通过HTML属性来绑定事件处理程序是最简单的方式。

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>&lt;button οnclick="alert('hello');alert('world')"&gt;按钮&lt;/button&gt;</td> 
 </tr> 
 </tbody> 
</table>

*  这种方式当我们点击按钮以后，onclick属性中对应的JS代码将 会执行，也就是点击按钮以后，页面中会弹出两个提示框。
 *  这种方式我们直接将代码编写到了onclick属性中，可以编写多 行js代码，当然也可以事先在外部定义好函数。
 *  这种方式的优点在于，设定步骤非常简单，并且能够确保事件 处理程序会在载入时被设定。
 *  如果在函数的最后return false则会取消元素的默认行为。

## 2.2、通过DOM对象的属性绑定 ##

*  但是其实上面的写法虽然简单，但却将JS和HTML 的代码编写到了一起，并不推荐使用，我们更推荐 如下的写法:

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> var btn = document.getElementById('btn'); btn.onclick = function(){ <pre><code> alert("hello");
 };</code></pre> </td> 
 </tr> 
 </tbody> 
</table>

*  这种写法将HTML代码和JS写在不同的位置，维护 起来更加容易。

# 三、设置事件的监听器 #

• 前边两种方式都可以绑定事件处理程序，但是它们都有一个缺 点就是都只能绑定一个程序，而不能为一个事件绑定多个程序。

• 这是我们就可以使用addEventListener()来处理，这个方法需 要两个参数:一个是事件字符串，一个是响应函数。

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>btn.addEventListener('click' , function(){alert("hello");});</td> 
 </tr> 
 </tbody> 
</table>

• 但是要注意的是ie8以下的浏览器是不支持上边的方法的，需要 使用attachEvent代替。

• 也可以使用removeEventListener()和detachEvent()移除事件。

## 3.1、事件处理中的this ##

• 在事件处理程序内的 this 所引用的对象即是设定了该事件处理程序的元素。

• 也就是事件是给那个对象绑定的this就是哪个对象。

## 3.2、事件对象 ##

* 在DOM对象上的某个事件被触发时，会产生一个 事件对象Event，这个对象中包含着所有事件有关 的信息。包括导致事件的元素、事件的类型以及其 他与特定事件相关的信息。
 * 例如，鼠标操作导致的事件对象中，会包含鼠标位 置的信息，而键盘操作导致的事件对象中，会包含与按下的键有关的信息。所有浏览器都支持 event对象，但支持方式不同。
 * DOM标准的浏览器会将一个event对象传入到事件的处理程序 当中。无论事件处理程序是什么都会传入一个event对象。
 *  可以通过这种方式获取:
 
 <table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> btn.onclick = function(event){ alert(event.type); }; </td> 
 </tr> 
 </tbody> 
 </table>
 *  Event对象包含与创建它的特定事件有关的属性和方法。触发 的事件类型不一样，可用的属性和方法也不一样。

## 3.3、Event对象的通用属性/方法 ##

<table style="width:681px;"> 
 <tbody> 
 <tr> 
 <td> 属性/方法 </td> 
 <td> 类型 </td> 
 <td style="width:88px;"> 读/写 </td> 
 <td style="width:317px;"> 说明 </td> 
 </tr> 
 <tr> 
 <td> bubbles </td> 
 <td> Boolean </td> 
 <td style="width:88px;"> 只读 </td> 
 <td style="width:317px;"> 事件是否冒泡 </td> 
 </tr> 
 <tr> 
 <td> cancelable </td> 
 <td> Boolean </td> 
 <td style="width:88px;"> 只读 </td> 
 <td style="width:317px;"> <pre><code>是否可以取消事件的默认行为
</code></pre> </td> 
 </tr> 
 <tr> 
 <td> currentTarget </td> 
 <td> Element </td> 
 <td style="width:88px;"> 只读 </td> 
 <td style="width:317px;"> 当前正在处理的事件元素 </td> 
 </tr> 
 <tr> 
 <td> defaultPrevented </td> 
 <td> Boolean </td> 
 <td style="width:88px;"> 只读 </td> 
 <td style="width:317px;"> 是否调用了preventDefault() </td> 
 </tr> 
 <tr> 
 <td> detail </td> 
 <td> Number </td> 
 <td style="width:88px;"> 只读 </td> 
 <td style="width:317px;"> 与事件相关的细节信息 </td> 
 </tr> 
 <tr> 
 <td> eventPhase </td> 
 <td> Number </td> 
 <td style="width:88px;"> 只读 </td> 
 <td style="width:317px;"> 阶段&nbsp;1:捕获&nbsp;2:目标&nbsp;3:冒泡 </td> 
 </tr> 
 <tr> 
 <td> preventDefault() </td> 
 <td> Function </td> 
 <td style="width:88px;"> 只读 </td> 
 <td style="width:317px;"> 取消事件的默认行为 </td> 
 </tr> 
 <tr> 
 <td> stopImmediatePropagation() </td> 
 <td> Function </td> 
 <td style="width:88px;"> 只读 </td> 
 <td style="width:317px;"> <pre><code>取消事件的进一步捕获或冒泡
</code></pre> </td> 
 </tr> 
 <tr> 
 <td> stopPropagation() </td> 
 <td> Function </td> 
 <td style="width:88px;"> 只读 </td> 
 <td style="width:317px;"> <pre><code>取消事件的进一步捕获或冒泡
</code></pre> </td> 
 </tr> 
 <tr> 
 <td> target </td> 
 <td> Element </td> 
 <td style="width:88px;"> 只读 </td> 
 <td style="width:317px;"> 事件的目标 </td> 
 </tr> 
 <tr> 
 <td> trusted </td> 
 <td> Boolean </td> 
 <td style="width:88px;"> 只读 </td> 
 <td style="width:317px;"> 是否是浏览器内置事件 </td> 
 </tr> 
 <tr> 
 <td> type </td> 
 <td> String </td> 
 <td style="width:88px;"> 只读 </td> 
 <td style="width:317px;"> 被触发的事件的类型 </td> 
 </tr> 
 </tbody> 
</table>

## 3.4、IE中的事件对象 ##

*  与访问DOM中的event对象不同，要访问IE中 的 event 对象有几种不同的方式，取决于指定事件 处理程序的方法。
 *  在IE中event对象作为window对象的属性存在的， 可以使用window.event来获取event对象。
 *  在使用attachEvent()的情况下，也会在处理程序中 传递一个event对象，也可以按照前边的方式使用。

## 3.5、Event对象的通用属性/方法 ##

# 四、事件的触发 #

*  事件的发生主要是由用户操作引起的。
 *  比如mousemove这个事件就是由于用户移动鼠标引起的，在鼠标指针移动的过程中该事件会持续发生。
 *  当指定事件被触发时，浏览器就会调用对应的函数去响 应事件，一般情况下事件没触发一次，函数就会执行一 次。
 *  因此设置鼠标移动的事件可能会影响到鼠标的移动速度。 所以设置该类事件时一定要谨慎。

## 4.1、事件的传播 ##

• 在网页中标签与标签之间是有嵌套关系的，比如这样一个页面:

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;html&gt; &lt;body&gt; &lt;div id="foo"&gt; &lt;button id="bar"&gt;sample&lt;/button&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </td> 
 </tr> 
 </tbody> 
</table>

• 如果这时用户点击了sample按钮，则会以该按钮作为事件目标触发一次点击事件。

• 这时，事件的处理将会分为捕获阶段、目标阶段、事件冒泡这三个阶段。

## 4.2、事件的传播流程 ##

![70][]

• 捕获阶段  
– 这一阶段会从window对象开始向下一直遍历到目标对象，如果发现有对象绑定了响应事件则做相应的处理。

• 目标阶段

– 这一阶段已经遍历结束，则会执行目标对象上绑定的响应函数。

• 事件冒泡阶段

– 这一阶段，事件的传播方式和捕获阶段正好相反，会从事件目标一直向 上遍历，直至window对象结束，这时对象上绑定的响应函数也会执行。

## 4.3、取消事件传播 ##

• 我们可以使用event对象的两个方法完成:

– stopPropagation()  
– stopImmediatePropagation()

• 取消默认行为:  
– preventDefault()

# 五、常用简单例子 #

## 5.1、事件冒泡 ##

效果：

当点击子结点对象时其所有父节点都触发事件。

![70 1][]

## 5.2、事件的绑定 ##

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>/* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 参数： &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;obj 要绑定事件的对象 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;eventStr 事件的字符串(不要on) &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;callback 回调函数 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function bind(obj , eventStr , callback){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if(obj.addEventListener){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//大部分浏览器兼容的方式 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;obj.addEventListener(eventStr , callback , false); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}else{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * this是谁由调用方式决定 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * callback.call(obj) &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//IE8及以下 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;obj.attachEvent("on"+eventStr , function(){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//在匿名函数中调用回调函数 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;callback.call(obj); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}</td> 
 </tr> 
 </tbody> 
</table>

调用：

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>bind(btn01 , "click" , function(){ &nbsp; &nbsp; alert(this); });</td> 
 </tr> 
 </tbody> 
</table>

## 5.3、事件的拖拽 ##

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp;&nbsp; &nbsp;&lt;head&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;meta charset="UTF-8"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;title&gt;&lt;/title&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;style type="text/css"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;#box1{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 100px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height: 100px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-color: red; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;position: absolute; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;#box2{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 100px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height: 100px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-color: yellow; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;position: absolute; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;left: 200px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;top: 200px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/style&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;script type="text/javascript"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;window.onload = function(){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 拖拽box1元素 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;- 拖拽的流程 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;1.当鼠标在被拖拽元素上按下时，开始拖拽 &nbsp;onmousedown &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;3.当鼠标松开时，被拖拽元素固定在当前位置&nbsp;&nbsp; &nbsp;onmouseup &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//获取box1 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var box1 = document.getElementById("box1"); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//为box1绑定一个鼠标按下事件 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//当鼠标在被拖拽元素上按下时，开始拖拽 &nbsp;onmousedown &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;box1.onmousedown = function(event){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;event = event || window.event; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//div的偏移量 鼠标.clentX - 元素.offsetLeft &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//div的偏移量 鼠标.clentY - 元素.offsetTop &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var ol = event.clientX - box1.offsetLeft; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var ot = event.clientY - box1.offsetTop; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//为document绑定一个onmousemove事件 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.onmousemove = function(event){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;event = event || window.event; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//获取鼠标的坐标 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var left = event.clientX - ol; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var top = event.clientY - ot; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//修改box1的位置 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;box1.style.left = left+"px"; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;box1.style.top = top+"px"; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//为document绑定一个鼠标松开事件 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.onmouseup = function(){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//当鼠标松开时，被拖拽元素固定在当前位置&nbsp;&nbsp; &nbsp;onmouseup &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//取消document的onmousemove事件 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.onmousemove = null; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//取消document的onmouseup事件 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.onmouseup = null; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/script&gt; &nbsp;&nbsp; &nbsp;&lt;/head&gt; &nbsp;&nbsp; &nbsp;&lt;body&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="box1"&gt;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="box2"&gt;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</td> 
 </tr> 
 </tbody> 
</table>

效果：

![70 2][]

鼠标按下红色方块能拖动。

## 5.5、滚轮事件 ##

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp;&nbsp; &nbsp;&lt;head&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;meta charset="UTF-8"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;title&gt;&lt;/title&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;style type="text/css"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;#box1{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;width: 100px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;height: 100px; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;background-color: red; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/style&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;script type="text/javascript"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;window.onload = function(){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//获取id为box1的div &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;var box1 = document.getElementById("box1"); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//为box1绑定一个鼠标滚轮滚动的事件 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发， &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;但是火狐不支持该属性 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;注意该事件需要通过addEventListener()函数来绑定 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;box1.onmousewheel = function(event){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;event = event || window.event; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//event.wheelDelta 可以获取鼠标滚轮滚动的方向 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//向上滚 120 &nbsp; 向下滚 -120 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//wheelDelta这个值我们不看大小，只看正负 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//alert(event.wheelDelta); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//wheelDelta这个属性火狐中不支持 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//在火狐中使用event.detail来获取滚动的方向 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//向上滚 -3 &nbsp;向下滚 3 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//alert(event.detail); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 当鼠标滚轮向下滚动时，box1变长 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;当滚轮向上滚动时，box1变短 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//判断鼠标滚轮滚动的方向 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if(event.wheelDelta &gt; 0 || event.detail &lt; 0){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//向上滚，box1变短 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;box1.style.height = box1.clientHeight - 10 + "px"; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}else{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//向下滚，box1变长 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;box1.style.height = box1.clientHeight + 10 + "px"; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 需要使用event来取消默认行为event.preventDefault(); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;event.preventDefault &amp;&amp; event.preventDefault(); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动， &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;return false; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//为火狐绑定滚轮事件 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;bind(box1,"DOMMouseScroll",box1.onmousewheel); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;function bind(obj , eventStr , callback){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if(obj.addEventListener){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//大部分浏览器兼容的方式 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;obj.addEventListener(eventStr , callback , false); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}else{ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * this是谁由调用方式决定 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * callback.call(obj) &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//IE8及以下 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;obj.attachEvent("on"+eventStr , function(){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//在匿名函数中调用回调函数 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;callback.call(obj); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;}); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;/script&gt; &nbsp;&nbsp; &nbsp;&lt;/head&gt; &nbsp;&nbsp; &nbsp;&lt;body style="height: 2000px;"&gt; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&lt;div id="box1"&gt;&lt;/div&gt; &nbsp;&nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</td> 
 </tr> 
 </tbody> 
</table>

效果：

![70 3][]

当鼠标进入红色方块，鼠标向上滚向上滚，box1变短，反之变长。当然，Mac系统正好相反。

## 5.6、键盘事件 ##

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td>/* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 键盘事件： &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;onkeydown &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- 按键被按下 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;这种设计是为了防止误操作的发生。 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;onkeyup &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- 按键被松开 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;document.onkeydown = function(event){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;event = event || window.event; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;/* &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 可以通过keyCode来获取按键的编码 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;通过它可以判断哪个按键被按下 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * 除了keyCode，事件对象中还提供了几个属性 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;altKey &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;ctrlKey &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;shiftKey &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;- 这个三个用来判断alt ctrl 和 shift是否被按下 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; * &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;如果按下则返回true，否则返回false &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; */ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//console.log(event.keyCode); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//判断一个y是否被按下 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;//判断y和ctrl是否同时被按下 &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;if(event.keyCode === 89 &amp;&amp; event.ctrlKey){ &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;console.log("ctrl和y都被按下了"); &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;} &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;};</td> 
 </tr> 
 </tbody> 
</table>

效果：

同时按下ctrl+y在控制台打印：

![70 4][]

[70]: /images/20220517/ceaf4f7d2774462da11e23b5a1698d20.png
[70 1]: /images/20220517/b3ba8674a82e4f37bee2937e37431b45.png
[70 2]: /images/20220517/55da6b5bfebc4fb887ba6bbf9b47752d.png
[70 3]: /images/20220517/88aa184aadc44a93a984ae340fe5807f.png
[70 4]: /images/20220517/ab00d6562638478aa87f8e4fa47b611e.png