JavaScript事件处理上

发表于 | 分类于

JavaScript事件处理上

客户端 JavaScript 程序采用了异步事件驱动编程模型，在这种程序设计风格下，当文档、浏览器、元素或与之相关的对象发生某些有趣的事情时，Web 浏览器就会产生事件。

如果 JavaScript 关注特定类型的时间，那么它可以注册当这类时间发生时要调用的一个或多个函数。

术语

了解相关的术语，有助于继续深入学习事件和事件处理。

  • 事件类型（event type）

    • 是一个用来说明发生什么事件的字符串，有时也被事件名字（event name）

  • 事件目标（event targe）

    • 是发生的事件或与之相关的对象，当将事件是，必须同时指明类型和目标。
    • Window、Document、Element是最常见的事件目标

  • 事件处理程序（event handler）

    • 事件处理程序（event handler）或事件监听程序（event listener） 是处理响应事件的函数。
    • 当对象在注册的事件程序被调用时，我们有时会说浏览器“触发”和“派发”了事件

  • 事件对象（event object）

    • 事件对象（event object）是与特定事件并且包含有关该事件详细信息的对象。
    • 事件对象作为参数传递给事件处理程序
    • 所有的事件对象都有用来指定事件类型的 type 属性和指定事件目标的 targe 属性。

  • 事件传播（event propagation）

    • 事件传播（event propagation）是浏览器决定哪个对象触发其事件处理程序的过程。
    • 当文档元素发生某个类型的事件时，他们会在文档树上向上传播或“冒泡”（bubble）
    • 事件处理程序能通过调用方法或设置事件对象属性来阻止事件传播，这样能停止冒泡并将无法再容器元素上触发的处理程序。

  • 事件捕获（event capturing）

    • 是事件传播的另一种形式，在容器元素上注册的特定处理程序有机会在事件传播到真实目标之前拦截（或“捕获”）它
    • IE8 版本之前不支持事件捕获

  • 事件的默认操作

    • 例如在超链接的点击事件，浏览器的默认操作是按照超链接重新加载页面
    • 事件处理程序可以通过返回一个适当的值、调用事件对象的某个方法设置事件对象的某个属性来阻止默认操作的发生。

事件类型

随着 Web 平台发展到包含更强大的API，事件集合随之越来越大，这些新事件主要有三个来源：

  • 3级 DOM 事件规范
  • HTML5 规范衍生规范的大量新API定义的事件
  • 基于触摸和支持 JavaScript 的移动设备的出现

事件大致可以分成几类，了解这些分类有助于理解和组织事件列表：

  • 依赖于设备的输入事件

    • 鼠标和键盘， mousedown、mousemove、mouseup、keydown、keyup

  • 独立与设备的输入事件

    • 这些事件没有直接相关的特定输入设备，如 click 事件，可以通过鼠标点击发生也可以通过键盘或者其他设备触发

  • 用户界面事件

    • 用户界面事件，通常出现定义 Web 程序用户界面的 HTML 表单元素上。
    • 包括文本输入域获取键盘焦点的 focus 事件、用户改变表单元格的 change 事件、表单提交 submit 事件

  • 状态变化事件

    • 不是由于用户活动而是由于网络或浏览器活动出发、用来标识某种声明周期或相关状态的变化
    • 例如，window 的 onload 事件，loadstart、progress、loadend等 I/O 过程的异步通知

  • 特定的 API 事件

    • HTML5 及相关规范定义的大量 Web API 都有自己的事件类型
    • 如拖放 API，dragstart、dragenter，<video /> 等

传统事件类型

  • 表单事件

    • 表单事件是所有事件类型中最稳定且得到最良好支持的那部分
    • 表单提交和重置，会触发 submit 和 reset 事件
    • 类按钮元素（如单选、复选）交互时，click 事件
    • 用户通过文字、选择选项或选择复选框改变表单元素状态时，通常会触发 change 事件
    • 对于文本输入域，只有当焦点移动到其他元素才会触发 change 事件
    • 改变表单元素焦点时会触发，focus 和 blur 事件
    • 通过事件处理程序能取消 submit 和 reset 事件的默认操作

  • Window 事件

    • Window 事件是指事件的发生于浏览器窗口本身而非窗口中显示的任何特定文档内容相关
    • load 事件，是当文档和其他所有的外部资源（比如图片）完全加载并显示给用户时才会触发
    • unload事件，是当用户离开文档转向其他文档是触发它
    • resize、scroll事件，当用户调整浏览器窗口大小、滚动时会被触发，但其事件对象时非常普通的 Event 对象，没有指定调整大小或发生滚动的详细信息属性

  • 鼠标事件

    • 当用户在文档上移动单击鼠标都会产生鼠标事件，这些事件在鼠标指针所对应的最深嵌套元素上触发， 但他们会冒泡直到文档的最顶层
    • 事件对象中包含了，鼠标的位置和按键状态
    • 对于 click 事件， detail 属性制定了其是单击、双击、还是三击
    • mousemove 事件，当用户移动鼠标时触发，在该事件中，一定不能触发计算密集型任务
    • mouseover 事件，当用户鼠标指针悬停到新元素上时触发，mouseout，不在悬停在某个对象上时触发
    • mousewhell 事件，当用户鼠标滚轮时触发

  • 键盘事件

    • 用户每次按下或释放键盘上的按键时都会产生事件
    • 传递给事件处理程序的对象中有 keyCode 字段 ， 它指定按下或释放的键是哪一个
    • keydown、keyup、keypress 事件，键盘按下、释放，keypress 按住时可以产生连续多个相同的字符

DOM 事件

DOM的分级：根据W3C DOM规范，DOM是HTML与XML的应用编程接口（API），DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。

1级DOM：

1级DOM在1998年10月份成为W3C的提议，由DOM核心与DOM HTML两个模块组成。DOM核心能映射以XML为基础的文档结构，允许获取和操作文档的任意部分。DOM HTML通过添加HTML专用的对象与函数对DOM核心进行了扩展。

2级DOM

鉴于1级DOM仅以映射文档结构为目标，DOM 2级面向更为宽广。通过对原有DOM的扩展，2级DOM通过对象接口增加了对鼠标和用户界面事件（DHTML长期支持鼠标与用户界面事件）、范围、遍历（重复执行DOM文档）和层叠样式表（CSS）的支持。同时也对DOM 1的核心进行了扩展，从而可支持XML命名空间。

*2级DOM引进了几个新DOM模块来处理新的接口类型：

  • DOM视图：描述跟踪一个文档的各种视图（使用CSS样式设计文档前后）的接口；
  • DOM事件：描述事件接口；
  • DOM样式：描述处理基于CSS样式的接口；
  • DOM遍历与范围：描述遍历和操作文档树的接口；*

3级DOM

3级DOM通过引入统一方式载入和保存文档和文档验证方法对DOM进行进一步扩展，DOM3包含一个名为“DOM载入与保存”的新模块，DOM核心扩展后可支持XML1.0的所有内容，包括XML Infoset、 XPath、和XML Base。

“0级”DOM

当阅读与DOM有关的材料时，可能会遇到参考0级DOM的情况。需要注意的是并没有标准被称为0级DOM，它仅是DOM历史上一个参考点（0级DOM被认为是在Internet Explorer 4.0 与Netscape Navigator4.0支持的最早的DHTML）。

HTML5 事件

HTML5 及相关标准定义了大量新的 Web 应用 API，其中许多 API 都定义了事件。

  • 音频和视频 <audio> 和 <video>
  • 拖放事件
  • 表单的新特性，表单验证机制，包括验证失败时在表单元素上会触发 invalid 事件
  • 离线 Web 应用的支持
  • 许多新的API应用使用 message 事件进行异步通信。跨文档通信 API 允许一台服务器上的文档能通过和另一台服务器上的文档脚本交换消息。
  • XMLHttpRequest 规范定义了一系列事件来追踪异步的 I/O 进度，loadstart、progress、loadend

触摸屏和移动设备事件

可以在 Apple 开发者中心 查询更多信息