常用键盘事件
键盘事件
| 键盘事件 | 触发条件 |
|---|---|
| onkeyup | 某个键盘按键被松开时触发 |
| onkeydown | 某个键盘按键被按下时触发 |
| onkeypress | 某个键盘按键被按下时触发 但是不识别功能键 例如 ctrl shift箭头等 |
1.如果使用addEventListener不需要加on
2. onkeypress 和前面2个的区别是，它不识别功能键，比如左右箭头，shift 等。
3. 三个事件的执行顺序是: keydown-- keypress — keyup
代码：
<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>
键盘事件对象
| 键盘事件对象 | 说明 |
|---|---|
| keyCode | 返回该键的ASCII值 |
1. onkeydown 和onkeyup不区分字母大小写, onkeypress 区分字母大小写.
2. 在我们实际开发中，我们更多的使用keydown和keyup，它能识别所有的键 (包括功能键)
3. keypress不识别功能键，但是keyCode属性能区分大小写,返回不同的ASCI值
使用keyCode属性判断用户按下哪个键
document.addEventListener('keyup',function(event){
console.log(event.key);
}）
案例：仿京东按键输入内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" name="" id=""><button>搜索</button>
<script>
document.addEventListener('keyup',function(event){
if(event.key=='s'){
document.querySelector('input').focus()
}
})
document.querySelector('input').addEventListener('keyup',function(event){
if (event.key=='Enter') {
alert('search')
}
})
</script>
</body>
</html>
案例：仿京东快递单号查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
border: 1px solid black;
}
.kuaid{
width: 300px;
height: 30px;
margin-left: 100px;
}
.big-box{
width: 300px;
height: 30px;
margin-top: 100px;
margin-left: 100px;
visibility: hidden;
}
.kuaid input{
width: 100%;
height: 30px;
outline: none;
border: 2px solid red;
box-sizing: border-box;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="big-box"></div>
<div class="kuaid">
<input type="text" name="" id="">
</div>
<script>
var input = document.querySelector('input');
var big_box = document.querySelector('.big-box');
console.log(input.value.length);
input.addEventListener('keyup',function(){
if(this.value.length>0){
big_box.style.visibility='visible'
}
big_box.innerHTML = this.value
})
</script>
</body>
</html>
BOM
什么是BOM
BOM (Browser Object Model)即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window.
BOM由-系列相关的对象构成，并且每个对象都提供了很多方法与属性。
BOM缺乏标准，JavaScript 语法的标准化组织是ECMA，DOM的标准化组织是W3C, BOM最初是Netscape浏览器标准的一部分。
是一门可以通过JS操作浏览器的技术
BOM的构成
window对象的常见事件
页面（窗口）加载事件（2种）
第一种：onload
window.onload是窗口页面)加载事件，当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等).就调用的处理函数。
注意：
- 有了window.onload就可以把JS代码写到页面元素的上方,因为onload是等页面内容全部加载完毕,再去执行处理函数。
- window.onload传统注册事件方式只能写-次，如果有多个，会以最后一个window.onload为准。
- 如果使用addEventlistener则没有限制
第二种：DOMContentLoaded
DOMContentLoaded事件触发时，仅当DOM加载完成，不包含样式表，图片，flash等等。
定时器
炸弹定时器 setTimeout（）
window.setTimeout(调用函数,[延迟的毫秒数]);
setTimeout()也被称为回调函数 callback
注意
- window可以省略。
- 延迟的毫秒数省略默认是0，如果写,必须是毫秒。
案例：5秒后关闭广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.banner {
width: 300px;
height: 70px;
background-color: #000;
color: #fff;
font: 40px/1.5 'Microsoft Yahei';
}
.banner_hide {
display: none;
}
</style>
</head>
<body>
<div class="banner">
我选择，我喜欢
</div>
<script>
setTimeout(function () {
document.querySelector('.banner').className = 'banner_hide'
}, 5000)
</script>
</body>
</html>
停止定时器
window.clearTimeout(timeoutID)
setInterval() 闹钟定时器
开启定时器
window.setInterval(回调函数,[间隔的毫秒数]);
setinerval()方法重复调用一个函数，每隔这个时间点就会去调用一个回调函数。
停止定时器
window.clearInterval(intervalID);
案例：发送短信倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="box">
<input type="text" class="mobile">
<button class="btn_send">发送</button>
</div>
<script>
var btn_send = document.querySelector('.btn_send')
var mobile = document.querySelector('.mobile')
btn_send.addEventListener('click',function(){
// 改变按钮中的文字，将发送变成倒计时
// 将按钮设置为不可点击
if (mobile.value == '') {
alert('请输入手机号')
return false
}
// 创建变量，用于存储倒计时时间
var time=5
var id = setInterval(function(){
time--
if (time<=0) {
// 设置按钮可以点击
btn_send.disabled = false
// 清除计时器
clearInterval(id)
// 改变按钮文字内容
btn_send.innerHTML='发送'
return false
}
btn_send.innerHTML=time
},1000)
this.disabled=true
})
</script>
</body>
</html>
元素偏移量offset系列
offset 系列属性
| offset系列属性 | 作用 |
|---|---|
| element.offsetParent | 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body |
| element.offsetTop | 返回元素相对带有定位父元素上方的偏移 |
| element.offsetLeft | 返回元素相对有定位父元素左边框的偏移 |
| element.offsetWidth | 返回自身包括padding、边框、内容区的高度，返回数值不带单位 |
| element.offsetHeight | 返回自身包括padding、边框、内容区的高度，返回数值不带单位 |
offset 与 style区别
offset
- offset可以得到任意样式表中的样式值
- offset系列获得的数量是没有单位的
- offsetWidth 包含padding+border+width
- offsetWidth 等属性是只读属性，只能获取不能赋值
想要获取元素大小位置，用offset更合适
style
- style 只能得到行内样式表中的样式值
- style.width 获得的是带有单位的字符串
- style.width 获得不包含padding和border的值
- style.width 是可读写属性，可以获取也可以赋值
想要给元素更改值，则需要用style改变
元素可视区 client系列
client属性
| client系列属性 | 作用 |
|---|---|
| element.clientTop | 返回元素上边框的大小 |
| element.clientLeft | 返回元素左边框的大小 |
| element.clientWidth | 返回自身包括padding，内容的宽度，不含边框，返回数值不带单位 |
| element.clientHeight | 返回自身包括padding，内容的宽度，不含边框，返回数值不带单位 |
元素滚动 scroll系列
scroll属性
| scroll系列属性 | 作用 |
|---|---|
| element.scrollTop | 返回被卷去的上测距离，返回数值不带单位 |
| element.scrollLeft | 返回被卷去的左测距离，返回数值不带单位 |
| element.scrollWidth | 返回自身实际的宽度，不含边框，返回数值不带单位 |
| element.scrollHeight | 返回自身实际的高度，不含边框，返回数值不带单位 |
三大系列总结
| 三大系列大小对比 | 作用 |
|---|---|
| element.offsetWidth | 返回自身包括padding，边框，内容区的宽度，返回数值不带单位 |
| element.clientWidth | 返回自身包括padding，内容区的宽度，不含边框，返回数值不带单位 |
| element.scrollWidth | 返回自身实际宽度，不含边框，返回数值不带单位 |
主要用法
- offset系列经常用于获得元素位置 offsetLeft offsetTop
- client经常用于获取元素大小 clientWidth clientHeight
- scroll经常用于获取滚动距离 scrollTop scrollLeft
- 注意页面滚动的距离通过 window.pageXoffset获得
473
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
