JavaScript 常用DOM事件类型 (javascript红皮书二刷 - Ch13.4 事件类型)

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 直接通过字符串判断按键。