美文网首页
学习笔记四|事件处理

学习笔记四|事件处理

作者: ForeverYoung20 | 来源:发表于2016-10-24 18:29 被阅读22次

    事件类型

    传统事件类型

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

    相关文章

      网友评论

          本文标题:学习笔记四|事件处理

          本文链接:https://www.haomeiwen.com/subject/plfluttx.html