webcourse/Web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add: 键盘事件

Browse Source
This commit is contained in:
qianguyihao 2019-11-26 19:49:07 +08:00
parent 94e562d95f
commit 97c21c682e
3 changed files with 86 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
04-JavaScript基础/29-事件委托.md
View File

@ -79,3 +79,18 @@
- [JavaScript 事件委托详解](https://zhuanlan.zhihu.com/p/26536815) - [JavaScript 事件委托详解](https://zhuanlan.zhihu.com/p/26536815)
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/20190101.png)

65
04-JavaScript基础/30-键盘事件.md
View File

@ -15,7 +15,6 @@
`DOMMouseScroll`：在火狐中需要使用 DOMMouseScroll 来绑定滚动事件。注意该事件需要通过addEventListener()函数来绑定。 `DOMMouseScroll`：在火狐中需要使用 DOMMouseScroll 来绑定滚动事件。注意该事件需要通过addEventListener()函数来绑定。
## 键盘事件 ## 键盘事件
### 事件名 ### 事件名
@ -56,7 +55,7 @@
可以通过`event`事件对象的`keyCode`来获取按键的编码。 可以通过`event`事件对象的`keyCode`来获取按键的编码。
此外，`event`事件对象还提供了以下几个属性： 此外，`event`事件对象里面还提供了以下几个属性：
- altKey - altKey
@ -65,11 +64,63 @@
- shiftKey - shiftKey
上面这三个属性，可以用来判断`alt`、`ctrl`、和`shift`是否被按下。如果按下则返回true，否则返回false。 上面这三个属性，可以用来判断`alt`、`ctrl`、和`shift`是否被按下。如果按下则返回true，否则返回false。代码举例：
```html
<body>
<script>
document.onkeydown = function(event) {
event = event || window.event;
console.log('qianguyihao：键盘按下了');
// 判断y和ctrl是否同时被按下
if (event.ctrlKey && event.keyCode === 89) {
console.log('ctrl和y都被按下了');
}
};
</script>
</body>
```
**举例**：input 文本框中，禁止输入数字。代码实现：
```html
<body>
<input type="text" />
<script>
//获取input
var input = document.getElementsByTagName('input')[0];
input.onkeydown = function(event) {
event = event || window.event;
//console.log('qianguyihao:' + event.keyCode);
//数字 48 - 57
//使文本框中不能输入数字
if (event.keyCode >= 48 && event.keyCode <= 57) {
//在文本框中输入内容，属于onkeydown的默认行为
return false; // 如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
}
};
</script>
</body>
```
## 举例
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
![](http://img.smyhvae.com/20190101.png)

26
05-JavaScript进阶/JavaScript开发积累.md
View File

@ -1,14 +1,11 @@
### 方法的注释 ### 方法的注释
方法写完之后（注意，一定要先写完整），我们在方法的前面输入`/**`，然后回车，会发现，注释的格式会自动补齐。 方法写完之后（注意，一定要先写完整），我们在方法的前面输入`/**`，然后回车，会发现，注释的格式会自动补齐。
比如： 比如：
```javascript ```javascript
/** /**
* 功能：给定元素查找他的第一个元素子节点，并返回 * 功能：给定元素查找他的第一个元素子节点，并返回
@ -21,7 +18,6 @@ function getFirstNode(ele){
} }
``` ```
### 断点调试 ### 断点调试
（1）先让程序运行一遍。 （1）先让程序运行一遍。
@ -51,7 +47,6 @@ function getFirstNode(ele){
![](http://img.smyhvae.com/20180124_2038.png) ![](http://img.smyhvae.com/20180124_2038.png)
### 2019-05-20-给数组、对象赋值 ### 2019-05-20-给数组、对象赋值
**数组赋值的正确写法**： **数组赋值的正确写法**：
@ -69,14 +64,19 @@ Object.assign(this.dataObj, dataObj);
上方代码中，是将`dataObj` 的值追加到`this.dataObj`中。如果对象里属性名相同，会被覆盖。 上方代码中，是将`dataObj` 的值追加到`this.dataObj`中。如果对象里属性名相同，会被覆盖。
### 2019-11-25-在新的窗口中打开url
在原来的窗体中跳转到新页面：
```javascript
window.location.href="要跳转的新页面";
```
在新窗体中打开新页面：
```javascript
window.open('你所要跳转的新页面');
```