学习笔记四|事件处理
2016-10-24 本文已影响22人
ForeverYoung20
事件类型
传统事件类型
- 表单事件
- 当提交表单和重置表单时，<form>元素会分别触发submit和reset事件。
- 当用户和类按钮表单元素（包括单选按钮和复选框）交互时，会发生click事件。
- 当用户通过输入文字、选择选项或选择复选框来改变相应表单元素的状态时，会触发change事件。
- window事件
- unload事件：当用户离开当前文档转向其他文档时会触发它。
- load事件：当文档和其所有外部资源完全加载并显示给用户时就会触发它。
- onerror：当JavaScript出错时触发。
- 当用户调整浏览器窗口大小或滚动它时会触发resize和scroll事件。
- 鼠标事件
- 移动鼠标，触发mousemove事件。
- 按下鼠标，触发mousedown事件。
- 释放鼠标，触发mouseup事件。
- 在mousedown和mouseup事件队列之后，会触发click事件。
- 双击鼠标，跟在第二个click事件之后的是dblclick事件。
- 右击鼠标，在显示菜单之前，先触发contextmenu事件，取消这个事件就可以阻止菜单的显示。
- 移动鼠标悬停在新元素上时，触发mouseover事件。
- 移出鼠标，触发mouseout事件。
- 键盘事件
- 按下按键，触发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.
