js 笔记_10 事件相关知识总结

格式：元素节点.on + 事件
例如点击事件：button.onclick = 匿名函数;

事件类型

事件类型包括：鼠标事件、键盘事件、HTML 事件

鼠标事件

事件	何时触发
click	单击
dbclick	双击
mouseover	鼠标移入
mouseout	鼠标移出
mousemove	鼠标移动（会不停出发）
mousedown	鼠标按下
mouseup	鼠标抬起
mouseenter	鼠标移入
mouseleave	鼠标移出

button 的属性

左键：0
滚轮：1
右键：2

获取当前鼠标位置

方法	原点位置
clientX、clientY	可视窗口的左上角
pageX、pageY	整个页面的左上角
screenX、screenY	电脑屏幕的左上角

键盘事件

事件	何时触发
keydown	键盘按下（按下不放手，会一直触发）
keyup	键盘抬起
keypress	键盘按下（只支持字符键）

HTML 事件

window 事件

事件	何时触发
load	当页面加载完成后
unload	当页面解构时（刷新 / 关闭页面）只有IE兼容
scroll	页面滚动时
resize	窗口大小发生变化时

表单事件

事件	何时触发
blur	失去焦点
focus	获取焦点
select	在输入框内选中文本时
change	对修改输入框内文本并失去焦点时
submit	点击 submit 上的按钮（必须添加在 form 元素上）
reset	点击 reset 上的按钮（必须添加在 form 元素上）

事件对象

事件对象的获取

let e = 形参 || window.event;

事件对象的属性

修改键

shiftKey：按下 shift 键，为 true；否则为 false；
altKey：按下 alt 键，为 true；否则为 false；
ctrlKey：按下 ctrl 键，为 true；否则为 false；
metaKey：按下 windows / command 键，为 true；否则为 false；

键盘事件对象

keyCode：键码

• 格式：

let which = e.which || e.keyCode;

• 返回值：键码返回的是大写字母的 ASCII 码值。不区分大小写；
• 只在 keydown 下支持；

charCode：字符码

• 格式：

let which = e.which || e.charCode;

• 返回值：字符码区分大小写，返回当前按下键对应字符的 ASCII 码值；
• 只在 keypress 下支持；