From 71c455e0af2ebf2bcaa39e14c2bc62746515184f Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Thu, 14 Nov 2019 21:11:14 +0800 Subject: [PATCH] =?UTF-8?q?add:=20=E9=94=AE=E7=9B=98=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../27-事件的绑定和事件对象Event.md | 4 +- ...获和事件冒泡.md => 28-事件的传播和事件冒泡.md} | 2 +- 04-JavaScript基础/30-键盘事件.md | 83 +++++++++++++++++++ 3 files changed, 85 insertions(+), 4 deletions(-) rename 04-JavaScript基础/{28-事件捕获和事件冒泡.md => 28-事件的传播和事件冒泡.md} (99%) create mode 100644 04-JavaScript基础/30-键盘事件.md diff --git a/04-JavaScript基础/27-事件的绑定和事件对象Event.md b/04-JavaScript基础/27-事件的绑定和事件对象Event.md index 5c26779..fa2847c 100644 --- a/04-JavaScript基础/27-事件的绑定和事件对象Event.md +++ b/04-JavaScript基础/27-事件的绑定和事件对象Event.md @@ -157,9 +157,7 @@ - `attachEvent()`中的this，是window。 -既然这两个写法的`this`不同，那么，有没有一种兼容性的写法可以确保这两种绑定方式的this是相同的呢？来看看 `bind` 是怎么用的。 - - +既然这两个写法的`this`不同，那么，有没有一种兼容性的写法可以确保这两种绑定方式的this是相同的呢？我们可以封装一下。代码如下： ```html diff --git a/04-JavaScript基础/28-事件捕获和事件冒泡.md b/04-JavaScript基础/28-事件的传播和事件冒泡.md similarity index 99% rename from 04-JavaScript基础/28-事件捕获和事件冒泡.md rename to 04-JavaScript基础/28-事件的传播和事件冒泡.md index 2c3c722..3e423f4 100644 --- a/04-JavaScript基础/28-事件捕获和事件冒泡.md +++ b/04-JavaScript基础/28-事件的传播和事件冒泡.md @@ -4,7 +4,7 @@ 事件传播的三个阶段是：事件捕获、事件冒泡和目标。 -- 事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，事件相应的监听函数是不会被触发的。 +- 事件捕获阶段：事件从祖先元素往子元素查找（DOM树结构），直到捕获到事件目标 target。在这个过程中，默认情况下，事件相应的监听函数是不会被触发的。 - 事件目标：当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。 diff --git a/04-JavaScript基础/30-键盘事件.md b/04-JavaScript基础/30-键盘事件.md new file mode 100644 index 0000000..44a976f --- /dev/null +++ b/04-JavaScript基础/30-键盘事件.md @@ -0,0 +1,83 @@ + +## 鼠标的拖拽事件 + +拖拽的流程： + +（1）`onmousedown`：当鼠标在被拖拽元素上按下时，开始拖拽； + +（2）`onmousemove`：当鼠标移动时被拖拽元素跟随鼠标移动； + +（3）`onmouseup`：当鼠标松开时，被拖拽元素固定在当前位置。 + +## 鼠标的滚轮事件 + +`onmousewheel`：鼠标滚轮滚动的事件，会在滚轮滚动时触发。但是火狐不支持该属性。 + +`DOMMouseScroll`：在火狐中需要使用 DOMMouseScroll 来绑定滚动事件。注意该事件需要通过addEventListener()函数来绑定。 + + +## 键盘事件 + +### 事件名 + +`onkeydown`：按键被按下。 + +`onkeyup`：按键被松开。 + + +**注意**： + +- 如果一直按着某一个按键不松手，那么，`onkeydown`事件会一直触发。此时，松开键盘，`onkeyup`事件会执行一次。 + +- 当`onkeydown`连续触发时，第一次和第二次之间会间隔稍微长一点，后续的间隔会非常快。这种设计是为了防止误操作的发生。 + +键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document。代码举例： + +```html + + + + + +``` + + +### 判断哪个键盘被按下 + +可以通过`event`事件对象的`keyCode`来获取按键的编码。 + + +此外，`event`事件对象还提供了以下几个属性： + +- altKey + +- ctrlKey + +- shiftKey + + +上面这三个属性，可以用来判断`alt`、`ctrl`、和`shift`是否被按下。如果按下则返回true，否则返回false。 + + + + + + + + + + + + + + +