什么是事件监听?
就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,也称为注册事件
语法: 元素.addEventListener('事件',要执行的函数)
事件监听三要素
- 事件源:那个
dom
元素被事件触发了,要获取dom
元素 - 事件:用什么方式触发,比如鼠标单击
click
、鼠标经过mouseover
等 - 事件调用的函数:要做什么事
resize
在窗口尺寸改变的时候触发的事件
//检测屏幕宽度:
window.addEventListener( ' resize ' , function () {
let w = document.documentElement.clientwidth
console.log(w)
}
load
加载事件
有些老代码写在html
架构前面,导致js
加载失败,可以给window
增加监听事件load
,意思是等页面加载完成再执行里面代码
- 表单
input
输入事件 输入过程中就会触发 - 键盘
keydown
按下 keyup弹起事件 change
事件 当离开表单 而且里面的值发生改变了才会触发 和blur
光标离开就触发不一样- 鼠标
mousemove
鼠标移动事件
document.addEventListener(‘mousemove’,function(e){
})
- 其中的事件回调函数中的形参e 也称为 事件对象,一般写 e, event,ev
- 常用的属性为
pageX pageY
,即鼠标在页面全局的坐标,跟文档坐标有关系 - 事件
keyup 与 keydown
的事件对象e有属性key
可以知道按下的是键盘上的哪个键
自动触发点击事件
let btn = document.querySelector('button')
btn.addEventListener('click',function(){})
btn.click() ///调用单击函数,模拟点击
scroll家族
页面或者盒子滚动事件,有滚动条的,scroll 事件
- 1):
div.scrollWidth
盒子里面的内容的宽度 ,如果有滚动条,该属性也不会包括滚动条的宽高,仅仅是内容的,返回值不带单位
2):div.scrollHeight
盒子里面的内容的高度,不是盒子高度 - 1):减去的
top
和left
当页面出现上下滚动条以及左右滚动条时,向下以及向右滑动滚动条移动的距离就是scrollTop
和scrollLeft
,可以检测出向下及向右位移了多少
2):scrollTop
和scrollLeft
是可以赋值修改的document.documentElement.scrollTop = 200
写法:
//一般被检测的是最大的元素
//如果是body,可以通过document.body拿到(因为只会有一个body)
//如果是html根元素.则是通过document.documentElement 拿到
//他的向下滚动位移量是
let num = document.documentElement.scrollTop
console.log(document.documentElement) // 拿到的整个文档元素 其实就是html标签,类似
document.querySelect(‘div’)//拿到的是div标签
offset家族
div.offsetWidth
div.scrollHeight
是盒子元素的大小,包括盒子本身的宽高 + padding + border
获取位置:
- 不是到可视窗口的距离,而是文档最顶部的距离,是固定的,不是变化的
- 获取元素距离自己定位父级元素的左、上距离;
注:
- 如果他的父级没有定位,则一直往上找,直到整个页面
offsetLeft和offsetTop
注意是只读属性
当满足scrollHeight-scrollTop = clientHeight
说明垂直滚动条到底了,说明你把整个页面从上到下看完了,没看完不让你勾选
client家族
获取宽高:
clientWidth和clientHeight
当放大缩小浏览器窗口时,会发生改变,即可视部分的宽高发生了改变,当调出控制台时,可视部分也发生改变,因为下边部分被遮挡了- 获取元素的可见部分宽高(不包含边框,滚动条等)
获取位置:
clientLeft和clientTop
注意是只读属性,获取到的值就是边框的宽度,因为可视区域不包括边框,
断点调试
打开浏览器 按F12,选择Sources
,在代码的行数点一下,重新选择断点后刷新一下页面,代码就会在这一行停止,不会执行这一行即以下代码
- break 退出循环
- break 只会对离他最近的循环产生影响
- 可以为 循环加一个label ,可以指定break 终止的是哪个循环
- continue 也是如此
//outer:
for(let i = 0; i< 5;i++){
for(let j = 0; j< 5;j++){
if(j = = 2){
break outer;
}
}
}
//continue 跳出此次循环,不会执行下面代码,
let i= 1
while(i<=5){
if(i===3){
i++
continue
}
document.write(`我要吃第${i}个包子`)
i++
}
结果为:
- 我要吃第1个包子
- 我要吃第2个包子
- 我要吃第4个包子
- 我要吃第5个包子
- 我要吃第6个包子
知道循环次数使用for,不知道循环使用while