本内容是用于Web前端开发的Javascript视频的课件，请通过Master Brother JavaScript视频课程学习。
Javascript与HTML的交互是通过事件实现的，使用异步事件驱动的编程模型;
事件事件：
是在文档或浏览器窗口中发生的特定交互时刻;
这种方法在传统软件工程中被称为观察者模式模型，旨在支持页面行为（Javascript代码）和页面外观（html和CSS）之间的松散耦合;
事件首次出现在IE3和Navigator 3中，当它们从IE4和Navigator4发布时，它们提供了相似但不相同的API，它们已经发展了几个版本;
DOM2 级事件模块本身并不涵盖所有事件类型。
事件类型：
是描述已发生事件类型的字符串，例如常见事件：单击（鼠标单击）、加载（页面或图像加载）、鼠标悬停（鼠标悬停）、选择（在表单中选取输入框）、提交（提交表单）、按键（键盘键）;
事件目标：事件的关联对象;
事件处理程序：事件通常与事件发生时执行的函数结合使用，此函数称为事件处理程序（函数）或事件侦听器或侦听器，响应和处理事件的函数;
事件流（事件传播）：
事件流是指元素可以触发其事件处理程序的过程，即这些元素可以触发事件在页面上接收事件的顺序;
IE不同于Netscape在事件序列（事件流）支持上，IE事件流是冒泡流，Netscape事件流是捕获流;
气泡事件：
IE有一个名为事件冒泡的事件流;
基本思想：事件按照它们从最具体的事件目标元素（文档中嵌套层次结构最深的节点）向上传播到最不具体的事件目标元素（窗口或文档对象）的顺序触发;ost
事件像DOM层次结构中的水泡一样上升到顶部，按<div>，<正文，><html>和文档的顺序排列;
气泡事件流
所有现代浏览器都支持事件冒泡;
捕获的事件：
Netscape团队开发的事件流称为事件捕获，其基本思想与冒泡相反，从最不准确的对象接收从最不准确的对象到最准确的对象的事件;
如果按照以下事件流的顺序捕获上述事件流：文档、<html>、<正文>和< div >，则也可以称为自上而下的事件模型;
捕获事件流
事件捕获旨在捕获事件到达其预期目标之前;
DOM2 事件规范要求事件应以文档对象开头，但标准浏览器都从 Windows 对象捕获事件。
DOM 事件流：
DOM支持两种事件模型，捕获事件和冒泡事件，DOM2事件指定事件流由三个阶段组成：事件捕获阶段，目标阶段和事件冒泡阶段;
分三个阶段执行 DoM 事件流
在DOM事件流中，实际目标在捕获阶段不接收事件;
DOM2级事件规范明确要求捕获阶段不涉及事件目标，但现代浏览器在捕获阶段触发事件对象上的事件，结果是有两次机会在目标对象上方操作事件;
注册事件处理程序/事件侦听器：
为响应事件而调用的函数称为事件处理程序或事件侦听器;
有三种方法可以注册事件处理程序;
HTML 事件处理程序：
在HTML元素的事件属性中指定，事件属性的名称是"on"事件名称，事件属性中的值是可以执行的Javascript代码，即HTML事件处理程序正文;
不能使用非寻呼 HTML 语法字符，例如 、"、< >;
如果 HTML 事件处理程序包含多个 Javascript 语句，则必须用分号分隔它们，或者中断属性值，以便它们可以跨越多行，例如：
您甚至可以在其中定义函数，例如：
HTML事件处理程序也可以在页面上的其他位置定义，即使在外部Javascript文件中也是如此。
HTML事件处理程序，在后台会创建一个封装的元素属性（attribute）值的函数，即由解释器动态创建一个函数，该函数还具有局部变量事件，即事件对象;
HTML 事件处理程序中的第 1 个指向事件的目标元素，例如：
HTML 事件处理程序的角色域很特殊，因为它可以访问全局作用域中的任何变量和对象，但它以与使用 with 语句相同的方式扩展作用域，也就是说，它可以访问文档及其内部自己的成员，就好像它是局部变量一样， 如：
通过这种方式，事件处理程序可以轻松访问其自身元素的属性（特性），例如：
如果当前元素是窗体控件元素，则作用域还包含访问窗体元素（父元素），例如：
因此，事件处理程序不需要引用表单元素来访问其他表单控件，例如：
HTML 事件处理程序的缺点：
时差：如果事件处理程序在响应时可能没有执行条件来犯错误，因此，为了避免这样的错误，必须在事件触发之前定义相关的处理程序，并且可以将相关的处理代码封装在try-catch中，例如：
其扩展作用域链的特殊方式会导致在不同的浏览器中产生不同的结果，HTML和JS代码耦合性很高，并且由于上述缺点，HTML事件处理程序不是很常用。
DOM0 级事件处理程序：
首先获取对元素的引用，然后将该函数分配给元素的相应事件处理程序属性;
优点：简单，并具有跨浏览器的优点;
每个元素（包括窗口和文档）都有自己的事件处理程序属性，这些属性名称区分大小写，通常全部小写，即使属性名称由多个单词组成，例如 onclick、onload、readystate change 等;
此事件处理程序被视为元素的方法，因此事件处理程序在元素的作用域中运行，其中第一个引用当前元素，即事件目标;
因此，元素的任何属性和方法都可以通过thisis访问;
以这种方式添加的事件处理程序在事件流的冒泡阶段进行处理;
您还可以删除事件处理程序（如事件），只需将其设置为 null;
HTML 事件处理程序和 DOM0 级事件处理程序的返回值：在某些情况下，您可以为它们设置返回值;
DOM0 事件处理程序的缺点是，只能为目标元素的事件注册一个事件处理程序，如果注册了多个事件处理程序，则最后一个注册的事件处理程序将覆盖前一个事件处理程序，例如：
DOM2 级事件处理程序：
DOM2定义了一个标准的事件模型，addEventListener（）方法为事件可以作为目标的所有元素（包括窗口和文档）定义，以处理（注册）指定的事件处理程序;
该方法接受三个参数：要处理的事件名称（无法添加，此处为标准事件名称），作为事件处理程序的函数和布尔值;
您还可以为同一事件注册多个事件处理程序;
定义 HTML 事件处理程序或 DOM0 级事件处理程序和 DOM2 级事件处理程序，例如：
RemoveEventListener（） Remove Event：通过 addEventListener（） 添加的事件处理程序只能使用 moveEventListener（） 方法删除，删除时，将传入与添加处理程序时相同的参数;
无法删除通过 addEventListener（） 添加匿名函数，例如：
但是，它可以伪装删除，例如：
如果使用 addEventListener（） 将事件处理程序添加到捕获阶段，则必须在 moveEventListener（） 中指示它是捕获阶段，以便正确删除此事件，即第三个参数也必须相同;
您还可以一次删除多个事件，例如：
三个事件使用相同的处理程序，此时，只要触发了三个事件中的一个，就会删除所有三个事件处理程序;
使用了三个处理程序;
如果要获取 Event 事件对象，则还会在事件处理程序的参数中指定该对象;
通常，事件处理程序被添加到事件流的冒泡阶段，从而最大限度地提高与各种浏览器的兼容性;
IE 事件处理程序：
IE9和以下不支持DOM事件，但它实现了类似dom的事件，这些事件向每个元素和Windows对象添加两个方法：attachEvent（"event_name event_name"，fnHandler）：将事件和事件处理程序附加到对象;这两种方法都接受相同的两个参数：事件名称和处理程序，但事件名称必须以"on"开头，例如 onclick;
（IE11 不支持，IE10 及更低版本）
您还可以添加多个事件处理程序，但处理程序的执行顺序可能与 DOM 不同，例如;
IE10和IE9的执行顺序与DOM相同，但IE8及以下的执行顺序与DOM相反;
由于IE仅支持事件冒泡（不支持事件捕获），因此将上述方法添加到冒泡阶段;
未触发对窗口对象的onclick，表示IE顶部的气泡是文档对象;
使用 targetEvent（） 删除由 atachEvent（） 添加的事件处理程序，但您还必须提供相同的参数，并且它不能删除添加的匿名函数，例如：
使用 atachEvent（） 和使用 DOM0 级方法之间的主要区别在于事件处理程序的作用域，该处理程序在全局范围内运行，因此 the 等于窗口;
您可以封装函数，向元素添加某种类型的事件，注册相关的事件处理程序，并将其指定为事件目标，例如：
在IE事件处理程序中，获取事件事件对象与dom不同;
与 DOM 和 IE 注册事件处理程序兼容：
跨平台添加/删除事件处理程序：
事件事件对象：
当触发DOM上的事件时，将生成一个事件对象，其中包含与该事件相关的所有信息;
获取事件信息非常重要，一般获取以下信息：元素（对象）、事件类型、事件发生时的鼠标信息、事件发生时的键盘信息等;
事件对象仅在事件发生时创建，并且只能由事件处理程序访问;
DOM 事件对象：
在 DOM 中，事件对象必须作为唯一参数传递给事件处理程序，并且 DOM0 级别和 DOM2 级别都用于获取事件对象。
通过 HTML 属性添加事件处理程序时，变量事件将保存事件对象，例如：
事件类：
Event 接口表示在 DOM 中发生的事件，DOM 是其他类型的事件的基类，包含适用于所有事件的属性和方法;
语法： 事件 s 新事件 （类型Arg， 事件初始化）;参数：类型Arg，字符串，所创建事件的名称;eventInit 可选，是 EventInit 类型的字典对象，接受以下字段：
"气泡"，可选，布尔类型，默认值为false，指示事件是否冒泡;
"可取消"，可选，布尔类型，默认值为false，指示是否可以取消事件;
"composed"，可选，布尔类型，默认为false，指示事件是否会触发Shadow DOM根节点外的侦听器;
但是，IE不支持它;对于事件，您可以将事件添加到元素并注册其处理程序，例如：
使用 dispatchEvent（） 方法触发事件，例如：
由于此事件可以冒泡，因此文档子体元素也可以触发该事件;
很少有应用程序使用event构造函数来返回事件对象，并且IE不支持它，因此我们稍后将讨论创建customEvent对象的另一种方法：document.createEvent（"type"）;
事件对象的属性和方法：
属性/方法类型读/写指令
气泡Boolean R指示事件是否冒泡;
CancelBubbleBolean R/W 设置阻止冒泡，是 stopPropagation（） 方法的历史别名，设置为 true，可以防止事件继续冒泡;
可取消的布尔ANR指示是否可以取消事件的默认行为;
ComposedBooleanR表明事件可以通过Shadow DOM的常规DOM之间的间隙冒泡;
currentTargetElementR注册当前事件的元素;
DeepPathArrayR由事件流通过的DOM节点组成;
defaultPreventedBoolean R表示事件的默认行为是否已被取消，DOM3添加到true，指示已调用preventDefault（）方法;
EventPhaseIntegerR指示事件流正在处理到哪个阶段：1用于捕获阶段，2用于目标阶段，3用于冒泡阶段;
显式源目标ElementR事件的显式原始目标;
在原始 TargetElementR 重置目标之前的事件原始目标;
ReturnValueBooleanR指示事件的默认行为是否被阻止，与 defaultPrevented 属性相同，这是旧 IE 引入的非标准历史属性，现在由收入调节;
srcElementElementR 事件目标与目标相同，由旧的 IE 引入，现已合并到规范中;
TargetElementR event target，触发事件的元素，与srcElement相同;
时间戳NumberR事件创建时间戳（以毫秒为单位）;
TypeStringR是触发的事件类型，大小写无法区分;
IsTrustedBooleanRDOM3被添加为true，表示事件是由浏览器生成的（例如用户点击），而false是由脚本创建的;
composedPath（）：返回一个包含事件路径的数组;
initEvent（）：初始化通过 document.createEvent（）;
preventDefault（）：取消事件的默认行为，如果可更改项为 true，则可以使用此方法;
StopImmediatePropagation（） :D添加了OM3，取消了事件的进一步捕获或冒泡，同时阻止了任何事件处理程序被调用;
停止传播（）：取消事件的进一步捕获或冒泡;
事件对象包含与创建它的特定事件相关的属性和方法，但触发的事件类型不同，可用的属性和方法也不同。
活动详情
与事件关联的 viewAbstractViewR 的抽象视图等效于事件发生的 windows 对象;
常见事件子类：
自定义事件：自定义事件类;
设备输入事件：旋转移动设备事件类;（例如，获取事件的旋转 x、y 和 Z 轴的角度等）
DragEvent：拖放事件类，它们继承事件类和鼠标事件类;
错误事件： 错误事件类;
FocusEvent：表示从 UIEvent 类继承的与焦点相关的事件类;
键盘事件：键盘事件类
MouseEvent：鼠标事件类，继承自 UIEvent 类;
突变事件：更改事件类;
TouchEvent：Touch Event 类，继承自 UIEvent 类;
用户界面事件;
WheelEvent：鼠标滚轮或类似输入设备的事件类;
类型属性：
当您需要使用一个函数处理多个事件时，可以使用type属性;
deepPath 属性：返回 Array，它由事件流传递的 DOM 节点组成;
返回的末尾与路径基本相同，但IE不支持此方法;
气泡属性：
气泡返回一个布尔值，指示当前事件是否会冒泡到DOM树顶部的元素;
例如，您可以检查属性是否冒泡，例如：
此属性、当前目标、目标和 srcElement 属性：
在事件处理程序中，这始终等于 currentTarget 的值，后者仅包含事件的实际目标;
如果将事件处理程序添加到元素的父节点，则三者是不同的，例如：
currentTarget 属性在将同一事件处理程序注册到多个元素（如：
对于srcElement属性，它最初是由IE6引入的，DOM事件目标指向同一个对象，虽然现在包含在标准中，但是在一些移动浏览器中是不支持的，所以在生产环境中，只是为了兼容旧版本的IE，而不是作为标准属性来使用;
事件相位属性：
事件对象的 eventPhase 属性返回一个整数值来确定事件的哪个阶段当前位于事件流中，如果没有正在处理任何事件（通常不会发生的值），则返回 Event.NONE，值为 0;如果事件处理程序位于目标对象 TARGET 上，则返回Event.CAPTURING_PHASE值、值 1 和 Event.AT 值为 2 时，如果在冒泡阶段调用事件处理程序，则返回值为 3 的Event.BUBBLING_PHASE;
目标对象本身的事件处理程序调用是第二阶段;
如果事件处理程序注册为捕获，则在事件传播的第一阶段调用它;
单独注册捕获事件处理程序：
事件捕获提供了在事件到达目标之前查看事件的机会，事件捕获可用于程序调试，或者对于后面描述的事件取消技术，过滤掉事件以便永远不会调用目标事件处理程序;
事件捕获通常用于处理鼠标拖放，因为处理拖放事件的位置不能是此元素中的子元素;
例：
取消事件（默认行为）：
在 HTML 事件处理程序和 DOM0 级事件处理程序中使用返回 false 值来取消事件的默认行为;
使用 Event 对象时，可以使用 preventDefault（） 方法来阻止（或取消）特定事件的默认行为。
当使用 premiereDefault（） 方法时，只有当可实现属性为 true 时，才能阻止事件的默认行为;
示例：验证数据输入，例如：
event 对象的 defaultPrevented 属性（在 DOM3 事件中是新的）表示当前取消事件的状态（默认为 false），如果调用 premiereDefault（） 方法，则该属性值为 true，例如：
ReturnValue 属性：由旧版本的 IE 引入的非标准历史属性，现在包含在收入规范中，preventDefault（） 和默认的"防止"属性也是如此;
取消事件传播：
使用立即停止 DOM 层次结构中事件的传播，即取消进一步的事件捕获或冒泡，例如：
如果多个事件处理程序注册到同一对象，则即使调用了 stopPropagation（） 方法，所有事件处理程序也会执行，例如：
CancelBubble，布尔值，可读写入，设置是否阻止冒泡，是stopPropagation（）方法的历史别名，设置为true，可以防止事件继续冒泡;
topImmediatePropagation（） 方法已添加到 DOM3 中的对象中，类似于 topPropagation（） 方法，以防止事件传播，并阻止对在同一对象上为同一事件注册的其他事件处理程序的调用，例如：
如果在与同一元素相同的事件类型上注册了多个事件处理程序，则在触发此事件时，将按添加它们的顺序调用它们，并且如果在其中一个事件处理程序中执行 stopImmediatePropagation（） 方法，则不会调用其余的事件侦听器，例如：
其他属性：时间戳，只读，创建事件时的时间戳，以毫秒为单位;
例如，您可以计算鼠标移动速度以显示每秒移动的像素数，例如：
IsTrusted，只读布尔值，DOM3添加，表示 true，表示事件是由浏览器生成的（例如用户单击），而 false 是由脚本创建的;
isTrusted属性通常用于检查事件是否受信任，如果它是用户操作的，它肯定是可信的，但在IE中，除了使用thecreevent（）方法创建的事件之外，所有事件都是可信的;
IE 中的事件对象：
在IE中，有几种方法可以访问事件对象，具体取决于指定事件处理程序的方法;
如果使用 atachEvent（） 添加它，则事件对象将作为参数传递到事件处理程序函数中;
如果通过 HTML 属性指定事件处理程序，则可以通过名为 eent 的变量访问事件对象：
IE 中事件对象的属性和方法：
IE中的事件对象还包含与创建它的事件相关的属性和方法。其中许多属性和方法对应于DOM的事件对象属性和方法;并且这些属性和方法因事件类型而异，因为以下是通用成员：属性/方法类型读/写说明
cancelBubble BooleanR/W 默认为 false，将其设置为 true 会取消事件气泡（与 topPropagation（） 方法相同）;
ReturnValue BooleanR/W 默认为 true，将其设置为 false 将取消事件的默认行为（与 DOM 中的 premiereDefault（） 方法相同）;
srcElement ElementR event target（与 DOM 中的目标属性相同）;
StringR 类型是触发的事件的类型
IE 中事件处理程序的作用域由其指定方式确定，因此不能假定此事件将始终等于事件目标，因此最好使用 event.srcElement，例如：
returnValue 属性等效于 DOM 中的 premiereDefault（） 方法，该方法旨在取消给定事件的默认行为（默认为 true），并通过将属性值设置为 false 来阻止默认行为，例如：
cancelBubble 属性的工作方式与 DOM 中的 topPropagation（） 方法相同，用于停止事件传播，但由于 IE 不支持事件捕获，因此只能取消事件冒泡，而 topPropagation（） 可以同时取消事件捕获和冒泡;
将跨浏览器事件添加到事件.js;
应用：