1.1. 常用的键盘事件
1.1.1 键盘事件
键盘事件 | 触发条件 |
---|---|
onkeyup | 某个键盘按键被松开时触发 |
onkeydown | 某个键盘按键被按下时触发 |
onkeypress | 某个键盘按键被按下时触发 但是它不识别功能键 比如Ctrl shift箭头等 |
<script>
// 常用的键盘事件
//1. keyup 按键弹起的时候触发
document.addEventListener('keyup', function() {
console.log('弹起');
})
//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keypress', function() {
console.log('按下press');
})
//2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊
document.addEventListener('keydown', function() {
console.log('按下down');
})
// 4. 三个事件的执行顺序 keydown -- keypress -- keyup
</script>
注意:
1、如果使用addEventListener不需要加on
2、onkeypress和前面两个的区别是,它不识别功能键,比如左右箭头,shift等
3、三个时间的执行顺序是: keydown – keypress – keyup
1.1.2 键盘事件对象
键盘事件对象 | 说明 |
---|---|
keyCode | 返回该键的ASCII值 |
使用keyCode属性判断用户按下哪个键
<script>
// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值
document.addEventListener('keyup', function(e) {
console.log('up:' + e.keyCode);
// 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键
if (e.keyCode === 65) {
alert('您按下的a键');
} else {
alert('您没有按下a键')
}
})
document.addEventListener('keypress', function(e) {
// console.log(e);
console.log('press:' + e.keyCode);
})
</script>
注意:
1、keyup和keydown 事件不区分字母大小写 a和A得到的都是65,keypress区分大小写
2、在实际开发中,更多的使用keydown和keyup ,他能识别所有键
3、keypress不识别功能键,但是keyCode属性区分大小写,返回不同的ASCII值
4、keydown和keypress在文本框里面的特点:他们两个事件触发的时候,文字还没有落入文本框中
1.2. BOM——浏览器对象模型
1.2.1. 什么是BOM
BOM(Browser Object Model)即浏览器对象模型,它提供了独立于内容而与浏览器窗口进行交互的对象,其核心对象是 window。
BOM 由一系列相关的对象构成,并且每个对象都提供了很多方法与属性。
BOM 缺乏标准,JavaScript 语法的标准化组织是 ECMA,DOM 的标准化组织是 W3C,BOM 最初是Netscape 浏览器标准的一部分。
1.2.2. BOM的构成
BOM 比 DOM 更大,它包含 DOM。
Windows对象是浏览器的顶级对象,它具有双重角色
- 它是js访问浏览器的一个接口
- 它是一个全局对象,定义在全局作用域中的变量,函数都会变成Windows对象的属性和方法。在调用的时候可以省略window,前面学习对话框都属于window对象方法,如alert()、prompt()等。
1.2.4. window对象的常见事件
页面(窗口)加载事件(2种)
第1种
window.onload = function(){
}
或者
window.addEventListener("load",