第56节 事件类型（Event Type）-Web前端开发之Javascript-王唯

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

事件类型很多，不同类型的事件有不同的信息;

DoM2 级事件指定以下五个事件：

UIEvent（用户界面，用户界面）事件，当用户与页面上的元素交互时触发;

MouseEvent 鼠标事件，当用户使用鼠标在页面上执行操作时触发;

KeyboardEvent 键盘事件：通过键盘在页面上执行操作时触发;

HTML事件：当浏览器窗口更改或发生特定的客户端/服务器交互时触发;

突变事件更改事件：当底层 DOM 结构更改时触发;

DoM3 级别在 DOM2 之上重新定义了这些事件，并添加了一些：

焦点事件事件：当元素获得或失去焦点时触发;

WheelEvent wheel 事件：使用鼠标滚轮（或类似设备）时触发;

文本事件：在文本中输入文本时触发;

综合事件：在输入法编辑器的字符时触发;

HTML5规范还定义了大量事件：历史管理，拖放，跨文本通信和多媒体等事件;

除了这些事件之外，一些浏览器还在dom和BOM中实现了其他专有事件;

从另一个角度来看，事件可以大致分为几大类：

与设备相关的输入事件：这些事件依赖于特定的输入设备，例如鼠标和键盘，但也取决于触摸事件;

与设备无关的输入事件：不依赖于特定的输入设备，例如点击事件，可以通过鼠标点击，也可以通过键盘或触摸设备来实现;

用户界面事件：通常是指在窗体控件上注册的事件，例如文本框获得焦点的焦点事件、控件更改值的更改事件或提交表单的提交事件;

状态更改事件：表示某些生命周期或相关状态中的变化的事件，例如随文档加载的加载事件或 DOMContentLoaded 事件或文档状态 readystatechange 事件;

特定API事件：HTML5和相关规范中定义的事件，如拖放事件，多媒体相关事件;

事件：

UIEvent 事件表示简单的用户界面事件，但包含的事件不一定与用户操作相关，而主要与元素的焦点相关;

事件类继承自事件类;

它定义自己的属性，例如：细节，图层X，图层Y，pageX，pageY，sourceCapability，视图和哪些;

与事件相关的活动：

DOMActive：表示当元素被用户操作（通过鼠标或键盘）激活时，该元素已发生;

load：页面完全加载时在窗口上触发，加载所有帧时在帧集上触发，加载图像时在< img >元素上触发，加载嵌入内容时在< >元素上触发;

卸载：页面完全卸载时在窗口上触发，所有帧卸载时在帧集上触发，或卸载嵌入内容时在< >元素顶部触发;

中止：当用户停止下载过程时，如果嵌入的内容未加载，则在< >元素上触发;

错误：当Javascript错误发生时在Windows上触发，当图像无法加载时在 <img>元素上触发，当无法加载嵌入内容时在< >元素上触发，或者当无法加载一个或多个帧时在帧集上触发;

select：当用户在文本框中选择一个或多个字符时触发（<输入>或<文本区域>）;

调整大小：当窗口或框架的大小发生变化时，在窗口或框架上触发;

scroll：当用户滚动时，在带有滚动条的元素上触发;

这些事件，在 DOM2 事件中，除了 DOMActive 事件之外，其他所有事件都是 HTML 事件，因此在确定浏览器是否支持 DOM2 事件时，最后进行检测，例如：

确定浏览器是否支持 DOM3 级事件，例如：

此外，这些事件中的大多数都与Windows对象或窗体控件相关，因此有些地方将这些事件称为Windows事件，因为大多数这些事件都与浏览器窗口相关。

load load事件：当页面完全加载（包括所有图像，Javascript文件和CSS文件等外部资源）时，它会触发Windows对象加载事件，这也是Javascript中最常用的事件;

有两种方法可以定义 onload 事件处理程序：

将 onload 属性添加到<正文>元素;

通常，在窗口中发生的任何事件都可以在<正文中通过适当的属性>元素指定，因为无法在HTML中访问窗口元素;

图像还可以触发加载事件，无论是在DOM中还是在HTML图像元素中;

艺术

创建新的 <img > 元素时，可以为其分配一个事件处理程序，您只需要指定要下载的 src 属性，而不必将其添加到 DOM 树中，例如：

您还可以使用 DOM0 级图像对象实现，例如：

还有一些元素以非标准方式支持加载事件;在标准浏览器中，<脚本>元素也会触发加载事件，以确定是否加载了动态加载的js文件，并在下载开始之前设置了<script>的scr属性并将其添加到文档中;

此时，事件对象的目标和当前目标或 srcElement 引用是<脚本>节点;

IE8和以下浏览器不支持<脚本>加载元素上的事件，但上面的代码不会引发异常;

浏览器还支持<链接>元素上的加载事件，例如：

与<script>类似，请指定其 hef 属性，并在下载之前将其添加到文档中。

卸载事件：在页面完全卸载后触发，或从一个页面切换到另一个页面，或者刷新操作也触发卸载事件，例如：

抛出异常：被阻止警报卸载，即页面被阻止，并且在卸载事件处理中，不允许阻止，例如弹出窗口，可能导致阻止;

卸载事件功能：

卸载事件的事件对象仅包含目标（或 srcElement）属性，值为 document;

卸载事件时的状态应为：

所有资源仍然存在（图像、iframe 等）

并非对所有最终用户资源都可见;

接互无效（窗口打开、报警、确认等，可导致阻塞） ;

错误不会停止卸载文档的过程;

卸载事件是短暂的，只有在所有东西都卸载后才会触发，因此不适合处理常规代码，通常取消（或清除）页面上的对象引用以避免内存泄漏;

示例：计算页面停留的时间长度，例如：

此外，卸载事件不会冒泡，也无法取消;

类似地，DOM2级事件指定卸载事件应该在<主体>元素上触发，而不是在Windows对象上触发，但所有浏览器都在Windows上实现卸载事件;

error event：window.onerror属性看起来像一个事件处理程序，并在Javascript出错时触发它，但它不是一个真正的事件处理程序，因为它的参数不是事件对象，而是5个参数，通过这些参数可以获得详细的错误信息;

消息：描述错误的错误消息;

URL：引发错误的 Javascript 所在的文档的 URL;

行：文档中发生错误的行数;

列：发生错误的列数;

错误：错误对象，此错误也称为全局错误对象;

但是，如果使用 DOM2 级事件处理程序，则参数是事件对象;

类从 Event 类继承，并定义以下属性：

消息：只读，返回所发生错误的说明;

文件名：只读，包含发生错误的脚本文本的URL;

lineno：只读，发生错误的行号;

冒号：只读，发生错误的列号;

错误：只读，错误发生时引发的错误对象;

这五个属性也对应于windows.onerror属性的五个参数;

如果是图片的一个单一事件，则为真实事件，其中只有一个参数，即对象;

中止事件：当资源的负载中止时，触发该事件;

调整大小事件：当浏览器窗口调整大小时，触发调整大小事件，该事件在窗口上触发;

在标准浏览器中，事件对象具有目标属性，值是Windows对象，但IE不提供任何属性;

浏览器大小变化1像素会触发调整大小事件，然后在更改时重复该事件;

当窗口最大化或最小化时，也会触发调整大小事件，但有些浏览器在最大化或最小化时会触发事件两次或更多次，这可以使用setTimeout（）来解决，这是为了延迟某些代码的执行，例如：

示例：随窗口大小而变化，例如：

例：

调整大小事件目前只能在Windows对象上注册，它不支持在DOM元素上注册，如果要监听调整大小的事件的DOM元素，最好的解决方案是使用自定义事件;

scroll事件：虽然它发生在Windows对象上，但它实际上代表了页面中相应元素的变化;

事件对象不提供与滚动相关的信息，而只是一个普通的 Object 对象;

在混合模式下，可以通过<正文的 scrollLeft 和 scrollTop 元素来监视此更改>元素，在标准模式下，通过< html > 元素来反映;

与调整大小事件类似，滚动事件在文档滚动活动期间反复触发，因此在滚动事件处理程序中保持代码尽可能简单;

滚动事件示例：

滚动事件也可以在Thelement元素上注册;

事件稳定（反跳）和油门）：

防止事件频繁触发;

稳定：高频事件触发后n秒仅执行一次，n秒内高频事件再次触发时重新计算时间;

在事件稳定中，清除计时器的计时至关重要，所有计时器必须在生成新计时器后清除，并且一次不执行目标函数;

示例：输入框验证

油门：稳定是多次触发事件，目标函数只执行一次，无论触发这些事件需要多长时间，而油门在一定时间内只执行一次，稀释了函数的执行频率，从而达到目标函数执行缓慢的目的;

使用 setTimeout（）：

使用 setInterval（）：

将事件处理程序放在 setInterval（） 函数中，如果发生了滚动事件，则每隔一段时间监视一次，然后执行它，而滚动事件只是更改滚动的值，不会影响性能，例如：

使用时间戳：

使用交换机：

设置一个开关，一次只能有一个触发器执行，并将执行设置定时执行一段时间，执行完成后再解锁;

比较两者：

节流在一定时间内，目标函数可以执行一次，限制目标函数的执行频率，无论事件触发多少次;

稳定是多次触发事件，目标函数只执行一次，无论触发这些事件需要多长时间;

油门功能限制了目标函数的执行频率，具有连续变化的效果，适用于注意变化过程的操作，可以调整目标功能的执行频率以使更改更流畅，例如动画，更改窗口以执行某些操作等，常用的事件大小调整， 滚动、鼠标轮、触摸移动、鼠标悬停等

防抖功能适用于较多关注操作结果，较少关注操作过程，常见事件有输入、键控等;

焦点事件焦点活动：

当页面元素获得或失去焦点时，或者当某些对象调用 focus（） 和 blur（） 方法时，将触发焦点事件;

有六个焦点事件：

模糊：当元素失去焦点时触发，事件不会冒泡;

焦点：当元素获得焦点时触发，并且事件不会冒泡;

DOMFocusIn：当元素获得焦点时触发，事件等效于HTML事件焦点，但它会冒泡;

DOMFocusOut：当一个元素失去焦点时触发，事件是HTML事件模糊等效物，但它会冒泡;

Focusin：当元素获得焦点时触发，事件等效于HTML事件焦点，但它会冒泡;

聚焦：当元素失去焦点时触发，事件是HTML事件模糊等效物，但它会冒泡;

要确定您的浏览器是否支持这些事件，您可以检测：

可以获得焦点事件的元素通常是指窗口或窗体控件或超链接或可编辑元素，称为可聚焦元素;

这个类别中最重要的两个事件是焦点和模糊，这两者在Javascript的早期都得到了所有浏览器的支持，而这两个事件的最大问题是它们没有冒泡，因此出现了IE的focusin和focusout以及Opera的DOMFocusIn和DOMFocusOut是两对事件， 后来，IE方法被DOM3事件作为标准;

焦点事件类：

表示与焦点相关的事件类，继承自 UIEvent 类;

它只添加了一个属性Target来表示事件的相关目标，但在实际应用中，例如切换浏览器选项卡标签，出于安全原因，所有浏览器都返回null;

当焦点从页面中的一个元素移动到另一个元素时，将依次触发以下事件：

模糊触发在失去焦点的元素上，焦点对失去焦点的元素触发，DOMFocusOut在失去焦点的元素上触发，焦点在获得焦点的元素上触发，domFocusIn触发在获得焦点的元素上触发;

其中，模糊、DOMFocusOut和焦点的事件目标是失去焦点的元素，而焦点的事件目标、DOMFocusIn和焦点元素;

此外，如果同时注册了 focusin 和 DOMFocusIn 或 focusout 和 DOMFocusOut，则在 IE 中将仅触发 focusin 和 focusout;

此外，除了焦点和模糊事件之外，其他事件只能通过 DOM2 级别的事件添加，例如：

HTML 事件处理支持聚焦和聚焦事件，但 FF 除外;

小型应用：更改文本框样式，例如：

Focusin 和 Focussout 事件正在冒泡，因此您可以使用事件代理，例如：

示例：验证数据，例如：

或者使用 focus（） 和 blur（） 方法，例如：

示例：一个 HTML 编辑器;

当用户按 Enter 键或失去焦点时，<文本区域>更改回< div >，其内容在< div >中变为 HTML;