第60节 HTML5事件和事件委托-JavaScript-零点程序员-王唯

本内容是用于Web前端开发的Javascript视频的课件，请通过Master Brother JavaScript视频课程学习。

DOM规范不包括所有浏览器支持的事件，许多浏览器实现了HTML5后来支持的自定义事件。

上下文菜单（上下文菜单）事件：

Win95在PC应用程序中引入的上下文菜单的概念，即由鼠标右键调用或按下键盘上的菜单键时调用的菜单，后来被引入Web域;提供自定义菜单，以便开发人员可以取消默认的上下文菜单;

上下文菜单事件是鼠标事件类型，因此其事件对象包含与鼠标位置相关的所有属性;

事件正在冒泡，因此您可以为文档分配一个事件处理程序，以处理页面上的所有此类事件。

上下文菜单事件通常用于显示自定义上下文菜单，而 onclick 事件处理程序用于隐藏菜单。

卸载前事件：

当浏览器窗口关闭或刷新时，事件被触发，事件应该在windows对象上注册，当事件被触发时，当前页面不会直接关闭，你可以用它来取消卸载并继续使用原来的页面，以便开发人员在页面卸载之前阻止此操作， 但并没有完全取消事件，意图是将控制权交给用户，它会显示一条消息，通知用户当前页面将被卸载，询问用户该页面是否真的要关闭，由用户决定;

事件没有冒泡;

Windows.alert（）、window.confirm（） 和 windows.prompt（） 方法不能在此事件中调用，因为对于 beforeunload 和 unload 事件，需要事件处理程序来阻止内部的当前线程，并且这些方法阻塞当前线程，因此 H5 规范明确指出，在 beforeunload 和 unload 中直接忽略对这些方法的调用;

为了显示对话框并询问用户是否真的要离开页面，应该在事件处理程序中根据规范调用 preventDefault（） 方法，但并非所有浏览器都遵循此规范，例如：

IE 显示一个默认对话框（是否确实要离开此页面？）。留下这张脸/留在此页面上），但其他浏览没有响应;

如果要实现自定义提示，可以让事件处理程序返回一个字符串，或者将 event.returnValue 的值设置为要显示的字符，例如：

IE 显示该对话框并包含返回的字符串，但其他浏览器不支持该字符串，其他浏览器必须将其作为函数值返回，例如：

示例：自动保存数据：

在卸载事件之前触发之前卸载;

通常，有些业务是在用户离开页面之前执行的，这些业务用于在未加载之前的事件，例如记录用户停留时间的业务，包括在GA等应用程序中用于页面访问统计信息：

DOMContentLoaded 事件：

当加载页面上的所有内容时，都会触发窗口加载事件，但是此过程可能会花费太长时间，因为有太多的外部资源需要加载，并且在形成完整的DOM树后触发doMContentLoaded事件，而无需等待图像，JS文件，CSS文件或其他资源下载;

使用此事件，您可以将事件处理程序添加到文档或窗口;

事件对象是一种事件类型，它不提供任何其他信息，也可以在 Windows 对象上注册，其目标是文档;

事件总是在加载事件之前触发，因此事件的目的是支持在页面下载中尽早添加事件处理程序，以便用户可以尽早与页面进行交互;

IE8 和以下浏览器不支持此事件，您可以在页面加载期间设置 0 毫秒的超时调用：在页面下载和重构期间只有一个 js 进程，因此在进程结束时会立即触发超时调用 不能保证在所有环境中都会触发加载事件， 如：

还有另外两个选项：

一种是创建一个空的脚本标签，该属性具有延迟，然后在onreadystatechange完成时触发DOMContentLoaded;

一种是通过调用doScroll（'left'）的原则来判断DOMContentLoaded，基本思想是通过反复尝试执行来检测document.documentElement.doScroll（"left"），因为在创建DOM树之前调用doScroll会抛出一个错误，如果没有抛出任何错误，则意味着DOM已准备就绪;

另一个选项：

艺术

就绪状态更改就绪状态更改事件：

IE为DOM文档的某些部分提供了一个readystatechange事件，该事件旨在提供有关文档或元素的加载状态的信息;

支持该事件的每个对象都有一个 readyState 属性，该属性可能包含以下五个值之一。

未初始化（未初始化）：对象存在但尚未初始化;

load：对象正在加载数据;

已加载（加载已完成）：对象完全加载数据

交互式：您可以操作对象，但尚未完全加载;

完成：对象已加载;

并非所有对象都经历事件的多个阶段，即如果一个阶段不适用于对象，则该对象完全有可能跳过该阶段;

对于文档，有三个阶段：加载、交互式和完成，例如：

当 readyState 状态为"交互式"时触发的 readystatechange 事件与 DOMContentLoaded 事件大致在同一时间发生;

模拟 domContentLoaded 事件：

当 readyState 值为完成时，加载事件的时间大致相同，但始终在加载事件之前;

模拟加载事件，例如：

在交互式和完成之间，您可以执行DOM，或做一些准备工作以加快页面的加载速度，例如：

但是，交互式交互阶段可能早于或晚于完成完成阶段，这并不能确保顺序，因此为了尽可能提前，有必要同时检测交互和完成阶段;

尽管可以使用 readystatechange 非常密切地模拟 DOMContentLoaded 事件，但它们本质上是不同的。

在极少数情况下，加载事件和 readystatechange 事件无法预测两个事件的触发顺序，并且如果页面上有大量资源，则 readystatechange 可能仅在 onload 事件之后触发;

示例：DOM 通过 load、readystatechange 和 DOMContentLoaded 事件准备就绪，如果是这样，可以执行回调函数;

在IE10下面，<脚本>和<链接>元素也会触发一个readystatechange事件，该事件可用于确定是否已加载外部JS和CSS文件;

此外，readystatechange事件存在于其他API中，例如XMLHttpRequest;

示例：包装 whenReady（） 函数以侦听 DOMContentLoaded 和 readystatechange 事件，例如：

哈希更改事件：

是 HTML5 中的一个新事件，用于在 URL 的参数列表（即所有字符串在"

哈希更改事件处理程序必须添加到Windows对象中，然后URL参数列表在更改后立即调用它;

哈希更改事件类：

表示当 URL 中的片段标识符更改时触发的更改事件;

HashChangeEvent 对象包含两个附加属性：旧 URL 和新 URL，它们保存参数列表更改前后的完整 URL（即，旧 URL 在跳转之前保存 URL，新 URL 保存即将跳转的新 URL），例如：

除IE7及以下版本外，所有浏览器都支持哈希更改事件;

虽然上面的 IE7 版本支持哈希更改事件，但 HashChangeEvent 类被视为普通 Event 类，因此不支持 HashChangeEvent 对象的这两个属性，但可以使用循环对象确定当前参数列表，例如：

检测浏览器是否支持哈希更改事件，例如：

如果IE8在IE7文档模式下运行，或者IE7下面的浏览器正在运行，即使该功能无效，它也会返回true，并且可以采取更安全的检测方法：

例：

HTML5还具有大量其他事件，例如音频和视频多媒体事件，拖放事件，历史管理事件等。

还有设备事件（即移动设备），包括触摸和手势事件;

内存和性能：

在JS中，添加到页面的事件处理程序的数量将直接关系到页面的整体性能，例如：每个函数都是一个对象，会消耗内存，内存中的对象越多，性能越差，必须提前指定所有导致dom访问的事件处理程序，会延迟整个页面的交互准备时间;

活动代表：

事件委托利用事件冒泡来指定一个事件处理程序来管理特定类型的所有事件;

使用事件委托，您只需要在 DOM 树中尽可能高的级别添加事件处理程序，例如：

如果可能，请考虑向文档对象添加事件处理程序，以处理页面上发生的特定类型的事件，以便冷杉的优点是：

文档对象可快速访问：事件处理程序可以在生命周期中的任何时间点添加到页面（无需等待DOMContentLoaded或加载事件）;

在页面上设置事件处理程序花费的时间更少，仅添加一个事件处理程序需要较少的DOM引用，并且花费的时间更少;

整个页面占用的内容空间更少，可以提高整体性能;

最适合使用事件委派技术的事件包括单击、鼠标按下、鼠标悬停、按键、键控和按键;

删除事件处理程序：

每当将事件处理程序分配给元素时，都会在正在运行的浏览器代码和支持页面交互的JS代码之间建立连接;

较旧的"悬空事件处理程序"的存在也是Web应用程序中内存和性能问题的主要原因。

在这两种情况下，这都可能导致上述问题，第一种是从文档中删除具有事件处理程序的元素时，这可能是通过纯 domicore 操作，例如使用 moveeChid（） 和 repleceChild（） 方法，或者用 innerHTML 替换页面的一部分，其中最初添加到元素的事件处理程序很可能不会被垃圾回收;

在设置 div 的 innerHTML 属性之前删除按钮的事件处理程序;

还有一种情况是使用事件委托，例如，如果您事先知道可以用innerHTML等替换页面的一部分，那么不要直接在本节中的元素上注册事件处理程序，而是在不会被替换的更高级别元素上注册事件处理程序;

请注意，删除事件处理程序中的目标元素还可以防止事件冒泡，并且目标元素是文档中事件冒泡的先决条件;

卸载页面时，如果没有干净的事件处理程序，它们将卡在内存中，每次加载页面然后卸载时，内存中剩余的对象数量都会增加，尤其是IE;

因此，在卸载页面之前，请通过 onunload 事件处理程序删除所有事件处理程序;