学习笔记四|事件处理

事件类型

传统事件类型

1. 表单事件

• 当提交表单和重置表单时，
  元素会分别触发submit和reset事件。
• 当用户和类按钮表单元素（包括单选按钮和复选框）交互时，会发生click事件。
• 当用户通过输入文字、选择选项或选择复选框来改变相应表单元素的状态时，会触发change事件。

2. window事件

• unload事件：当用户离开当前文档转向其他文档时会触发它。
• load事件：当文档和其所有外部资源完全加载并显示给用户时就会触发它。
• onerror：当JavaScript出错时触发。
• 当用户调整浏览器窗口大小或滚动它时会触发resize和scroll事件。

3. 鼠标事件

• 移动鼠标，触发mousemove事件。
• 按下鼠标，触发mousedown事件。
• 释放鼠标，触发mouseup事件。
• 在mousedown和mouseup事件队列之后，会触发click事件。
• 双击鼠标，跟在第二个click事件之后的是dblclick事件。
• 右击鼠标，在显示菜单之前，先触发contextmenu事件，取消这个事件就可以阻止菜单的显示。
• 移动鼠标悬停在新元素上时，触发mouseover事件。
• 移出鼠标，触发mouseout事件。

4. 键盘事件

• 按下按键，触发keydown。
• 释放按键，触发keyup。
• keydown事件产生可打印字符时，在keydown和keyup之间会触发keypress，其事件对象指定产生的字符而非按下的键。

DOM事件

wheel事件的处理程序接收到的事件对象除了所有普通鼠标事件属性，还有deltaX、deltaY和deltaZ属性来报告三个不同的鼠标滚轴。

触摸屏和移动设备事件

• Safari产生的手势事件用于两个手指的缩放和旋转手势。当手势开始时生成gesturestart事件，而手势结束时生成gestureend事件。
• 两个事件之间是跟踪手势过程的gesturechange事件队列。
• 事件对象有数字属性scale和rotation。
  • scale：两个手指之间当前距离和初始距离的比值。“捏紧”手势的scale值小于1.0，“撑开”手势的scale值大于1.0.
  • rotation：指从事件开始手指旋转的角度，以度为单位，顺时针旋转为正值。
• 手指触摸屏幕触发touchstart事件，手指移动触发touchmove事件，手指离开屏幕触发touchend事件。
• 触摸事件传递的事件对象有一个changedTouches属性，该属性是一个类数组对象，其每个元素都描述触摸的位置。
• 竖屏转到横屏模式时会在window对象上触发orientationchanged事件。
  • 移动版的Safari中，window对象的orientation属性可以给出当前方位，其值是0、 90、 180或-90 。

---

注册事件处理程序

设置JavaScript对象属性为事件处理程序

按照约定，事件处理程序属性的名字由“on”后面跟着事件组成。（略）

设置HTML标签属性为事件处理程序

（略）

addEventListener()

• 该函数接受三个参数
• 第一个是要注册处理程序的事件类型，是字符串。
• 第二个是当指定类型的事件发生时应该调用的函数。
• 第三个是布尔值。传递true时，函数将注册为捕获事件处理程序，并在事件不同的调度阶段调用。一般传递false

removeEventListener()方法

• 该函数同样有三个参数

attachEvent()

• attachEvent()和detachEvent()方法的工作原理同上述两个类似，但有如下例外：
• 因IE事件模型不支持事件捕获，只有两个参数：事件类型和处理程序函数。
• 第一个参数要带有“on”前缀。
• attachEvent()允许相同的事件处理程序函数注册多次。

---

鼠标事件

鼠标事件

---

鼠标滚轮事件

可以通过取消mousewheel事件来阻止使用鼠标滚动时的默认操作。

• 传递给mousewheel处理程序的事件对象有wheelDelta属性，其指定用户滚动滚轮有多远。
• 远离用户方向的一次鼠标滚轮“单击”的wheelDelta值通常为120.
• 接近用户方向的为-120.