JavaScript第十三章

JavaScript第十三章

• 理解事件流

  • 事件流：事件流描述的是从页面中接收事件的顺序
    • 事件冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
    • 事件捕获：事件捕获的思想是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在事件到达预定目标之前捕获它。
    • DOM事件流：包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。先由外到里再由里到外。

• 使用事件处理程序

  • 响应某个事件的函数就叫做事件处理程序
    • HTML事件处理程序：某个元素支持的每种事件，都可以使用一个与相应事件处理程序同名的HTML 特性来指定

    <input type="button" value="Click Me" onclick="函数" />

    • DOM0 级事件处理程序：将一个函数赋值给一个事件处理程序属性。
    • DOM2 级事件处理程序：“DOM2级事件”定义了两个方法，用于处理指定和删除事件处理程序的操作：addEventListener()
      和 removeEventListener()。所有 DOM 节点中都包含这两个方法，并且它们都接受 3 个参数：要处理的事件名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数如果是 true，表示在捕获阶段调用事件处理程序；如果是 false，表示在冒泡阶段调用事件处理程序。
    • IE事件处理程序：IE 实现了与 DOM 中类似的两个方法：attachEvent()和 detachEvent()。这两个方法接受相同的两个参数：事件处理程序名称与事件处理程序函数。
    • 跨浏览器的事件处理程序：第一个要创建的方法是 addHandler()，它的职责是视情况分别使用 DOM0 级方法、DOM2 级方法或 IE 方法来添加事件。addHandler()方法接受 3 个参数：要操作的元素、事件名称和事件处理程序函数。

• 事件对象

  • DOM中的事件对象：兼容 DOM 的浏览器会将一个 event 对象传入到事件处理程序中。无论指定事件处理程序时使用什么方法（DOM0 级或 DOM2 级），都会传入 event 对象。
  • IE中的事件对象：使用 DOM0 级方法添加事件处理程序时，event 对象作为 window 对象的一个属性存在。
  • 跨浏览器的事件对象：DOM 和 IE 中的 event 对象不同，但基于它们之间的相似性依旧可以拿出跨浏览器的方案来。IE 中 event 对象的全部信息和方法 DOM 对象中都有，只不过实现方式不一样。不过，这种对应关系让实现两种事件模型之间的映射非常容易。
• 事件类型
  • UI事件：当用户与页面上的元素交互时触发
  • 焦点事件：当元素获得或失去焦点时触发
  • 鼠标事件：当用户通过鼠标在页面上执行操作时触发
  • 滚轮事件：当使用鼠标滚轮（或类似设备）时触发
  • 文本事件：当在文档中输入文本时触发
  • 键盘事件：当用户通过键盘在页面上执行操作时触发
  • 合成事件：当为 IME（Input Method Editor，输入法编辑器）输入字符时触发
  • 变动事件：当底层 DOM 结构发生变化时触发

• 内存和性能

  • 事件委托：事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
  • 移除事件处理程序：只要是通过 onload 事件处理程序添加的东西，最后都要通过 onunload 事件处理程序将它们移除。
• #####模拟事件

  使用 JavaScript 在任意时刻来触发特定的事件，而此时的事件就如同浏览器创
  建的事件一样

  • DOM中的事件模拟:可以在 document 对象上使用 createEvent()方法创建 event 对象。这个方法接收一个参数，即表示要创建的事件类型的字符串。

  UIEvents：一般化的 UI 事件。鼠标事件和键盘事件都继承自 UI 事件。DOM3 级中是UIEvent。
  MouseEvents：一般化的鼠标事件。DOM3 级中是 MouseEvent。
  MutationEvents：一般化的 DOM 变动事件。DOM3 级中是 MutationEvent。
  HTMLEvents：一般化的 HTML 事件。没有对应的 DOM3 级事件（HTML 事件被分散到其他类
  别中）。

  • 模拟鼠标事件
  • 模拟键盘事件
  • 模拟其他事件
  • 自定义 DOM 事件
  • IE中的事件模拟

• 小结

  • 一个页面的事件数量不应该太多，多了处理不过来会卡。
  • 通过事件委托和移除事件来减少处理程序的数量。
  • 在浏览器卸载页面之前移除页面中的所有事件处理程序。在这里插入代码片