鼠标事件 键盘事件 表单事件 等事件总结

鼠标事件

事件类型

• click：用户单击主鼠标按钮（一般是左键）或者按下在聚焦时按下回车键时触发
• dblclick：用户双击主鼠标按键触发（频率取决于系统配置）
• mousedown：用户按下鼠标任意按键时触发
• mouseup：用户抬起鼠标任意按键时触发
• mousemove：鼠标在元素上移动时触发
• mouseover：鼠标进入元素时触发
• mouseout：鼠标离开元素时触发
• mouseenter：鼠标进入元素时触发，该事件不会冒泡
• mouseleave：鼠标离开元素时触发，该事件不会冒泡

区别：

• over和out，不考虑子元素，从父元素移动到子元素，对于父元素而言，仍然算作离开
• enter和leave，考虑子元素，子元素仍然是父元素的一部分
• mouseenter和mouseleave不会冒泡

事件对象

所有的鼠标事件，事件处理程序中的事件对象，都为 MouseEvent

• altKey：触发事件时，是否按下了键盘的alt键
• ctrlKey：触发事件时，是否按下了键盘的ctrl键
• shiftKey：触发事件时，是否按下了键盘的shift键
• button：触发事件时，鼠标按键类型
  • 0：左键
  • 1：中键
  • 2：右键

位置：

• page：pageX、pageY，当前鼠标距离页面的横纵坐标
• client: clientX、clientY，鼠标相对于视口的坐标
• offset：offsetX、offsetY，鼠标相对于事件源的内边距的坐标
• screen: screenX、screenY，鼠标相对于屏幕
• x、y，等同于clientX、clientY
• movement：movementX、movementY，只在鼠标移动事件中有效，相对于上一次鼠标位置，偏移的距离

键盘事件

事件类型

• keydown：按下键盘上任意键触发，如果按住不放，会重复触发此事件
• keypress：按下键盘上一个字符键时触发
• keyup：抬起键盘上任意键触发

keydown、keypress 如果阻止了事件默认行为，文本不会显示。

事件对象

KeyboardEvent

• code：得到按键字符串，适配键盘布局。
• key：得到按键字符串，不适配键盘布局。能得到打印字符。
• keyCode、which：得到键盘编码

其他事件

表单事件

• focus：元素聚焦的时候触发（能与用户发生交互的元素，都可以聚焦），该事件不会冒泡
• blur：元素失去焦点时触发，该事件不会冒泡。
• submit：提交表单事件，仅在form元素有效。
• change：文本改变事件
• input: 文本改变事件，即时触发

其他事件

window全局对象

• load、DOMContentLoaded、readystatechange

window的load：页面中所有资源全部加载完毕的事件
图片的load：图片资源加载完毕的事件

浏览器渲染页面的过程：

1. 得到页面源代码
2. 创建document节点
3. 从上到下，将元素依次添加到dom树中，每添加一个元素，进行预渲染
4. 按照结构，依次渲染子节点

document的DOMContentLoaded: dom树构建完成后发生

readystate: loading、interactive、complete

interactive：触发DOMContentLoaded事件

complete：触发window的load事件