文章目录
UI 交互事件
load 加载
通过 onload
属性或者 load
事件, 当页面完全加载完毕后触发。
- 后来加入的
img
可以利用这个来异步加载
unload 卸载
使用 unload
来卸载 load
事件程序。
- 卸载事件避免
内存泄漏
- 注意事件触发时许多
DOM
已经不存在, 无法操作不存在的DOM
resize 大小改变
当 DOM
的大小发生改变时触发。
- 注意最大化最小化也会触发这个事件
- 避免使用复杂函数导致计算量过高
scroll 滚动
事件在 window
对象上产生, 但是实际表示的则是页面中相应元素的变化, 如下代码可以显示滚动时的垂直顶部距离:
addEventListener(window, "scroll", function(){
console.log(document.scrollTop)
})
焦点事件
blur 失去焦点
当元素 失去焦点
时触发, 事件不会进行冒泡(即不会向上进行事件传递导致每个元素都执行一遍 blur
的事件效果)
focus 获得焦点
当元素 获得焦点
时触发, 事件同样不会进行冒泡。
鼠标和滚轮
click / dblclick 单双击事件
当用户进行 鼠标单击 / 双击
时触发, 需要注意的是, 按下 回车键
也可以触发。
mousedown / mouseup 按下释放事件
当用户 按下 / 松开
鼠标任意按键时触发, 不能通过 按键
触发。
mouseenter / mouseleave 进入离开事件
当鼠标 进入 / 离开
元素范围时触发。
mousemove 鼠标移动事件
当鼠标在元素范围内 移动
时即可触发。
针对鼠标事件的信息
event.clientX
和event.clientY
可以显示事件的客户端
(浏览器)坐标信息event.pageX
和event.pageY
可以显示页面
的坐标信息, 当页面没有滚动时和 👆 的信息相等event.screenX
和event.screenY
可以显示用户屏幕
的坐标信息event.shiftKey / ctrlKey / altKey / metaKey
可以获取是否按下了修饰键
event.button
可以显示按下的鼠标键, 1为主鼠标, 2为副鼠标, 4为中键
键盘和文本事件
keydown / keyup 按下弹起
通过 event.keyCode
可以获取触发的按键码。
keypress 按键事件
也可以通过 event.key
直接通过字符串判断按键。