事件类型
传统事件类型
- 表单事件
- 当提交表单和重置表单时,<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.
网友评论