事件
HTML DOM允许JavaScript对HTML事件做出反应。JavaScript能够在事件发生时执行，比如当用户点击某个HTML元素时。
(1)事件的组成
a.事件源：事件被触发的对象
b.事件类型
c.事件处理程序：通过一个函数赋值的方式。
(2)执行事件的步骤
a.获取事件源
b.绑定事件
c.采用函数赋值形式添加事件处理程序1.事件流
(1)事件流描述的是从页面中接收事件的顺序。事件发生时会在元素节点与根节点之间按照特定的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流。1.1事件冒泡（IE事件流）
(1)IE事件流被称为事件冒泡，这是因为事件被定义为从最具体的元素(文档树中最深的节点)开始触发，然后向上传播至没有那么具体的元素(文档)。
(2)如上图所示，当点击div元素时，即被点击的元素，最先触发click事件。然后click事件沿着DOM树一路向上，在经过的每个节点上依次触发，直至到达document对象。1.2阻止事件冒泡
(1)event.stopPropagation()
直接在对应方法中使用event.stopPropagation()
注意：如果点击方法时需要同时传递其他参数和event,直接传递event这个单词即可
onclick='test(123,event)'1.3 事件捕获(Netscape事件流)
(1)事件捕获的意思是最不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。
事件捕获实际上是为了在事件到达最终目标前拦截事件。1.3 DOM事件流
DOM2 Events规范规定事件流分为3个阶段：事件捕获，到达目标和事件目标。事件捕获最先发生，为提前拦截事件提供了可能。然后，实际的目标元素接收到事件。最后一个阶段是冒泡，最迟要在这个阶段相应事件。
点击div元素会以如图所示的顺序触发事件。
在DOM事件流中，实际的目标(div元素)在捕获阶段不会接收到事件。这是因为在捕获阶段从document到html再到body就结束了。
下一阶段，即会在div元素上触发事件的"到达目标"阶段，通常在事件处理时被认为是冒泡阶段的一部分。
然后，冒泡阶段开始，事件反向传播至文档。
注意：所有现代浏览器都支持DOM事件流，只有IE8及更早版本不支持。2.事件处理程序
事件意味着用户或浏览器执行的某种动作。比如，单机(click),加载(load),鼠标悬停(mouseover)。为响应事件而调用的函数被称为事件处理程序（或·事件监听器）。2.1 HTML事件处理程序
特定元素支持的每个事件都可以使用事件处理程序的名字以HTML属性的形式来指定。
此时属性的值必须是能够执行JavaScript代码。例如，要在按钮被点击时执行某些JavaScript代码，可以使用以下HTML属性：
点我啊
点击这个按钮后，控制台会输出一条消息。这种交互能力是通过onclick属性指定JavaScript代码值来实现的。
注意：因为属性的值是JavaScript代码，所以不能在未经转义的情况下使用HTML语法，比如和号(&)、双引号("),小于号(<)和大于号(>)。
此时，为了避免使用HTML实体，可以使用单引号代替双引号。如果确实需要使用双引号，则要把代码改成下面这样：
点我啊
在HTML中定义的事件处理程序可以包含精确的动作指令，也可以调用在页面其他地方定义的方法。
//需要加()
点我啊
在下面这个事件中，this值相当于事件的目标元素如下面的例子：
点我啊 2.2.DOM0事件处理程序
在JavaScript中指定事件处理程序的传统方式是把一个函数赋值给(DOM元素的)一个事件处理程序。
点我啊
这里先从文档中取得按钮，然后给它的onclick事件处理程序赋值一个函数。注意，前面的代码在运行之后才会给事件处理程序赋值。
因此如果在页面中上面的代码出现按钮之后，则有可能出现用户点击按钮没有反应的情况。
像这样使用DOM0方式为事件处理程序赋值时，所赋函数被视为元素的方法。
因此，事件处理程序会在元素的作用域中运行，即this等于元素。下面的例子演示了使用this引用元素本身。
点我啊
以上代码为按钮添加了会在事件冒泡阶段触发的onclick事件处理程序(因为最后一个参数值为false)。与DOM0方式类似，这个事件处理程序同样在被附加到的元素作用域中运行。
使用DOM2方式的主要优势是可以为同一个事件添加多个事件处理程序。
看下面的例子：
点我啊
这里给按钮添加了两个事件处理程序。多个事件处理程序以添加顺序来触发，因此前面的代码会先打印‘我被点击了’,然后显示元素ID
(2)removeEventListener() 通过addEventListener()添加的事件处理程序只能使用removeEventListener()并传入与添加时同样的参数来移出。
这意味着使用addEventListener()添加的匿名函数无法移除，
如下面的例子：
点我啊
4.事件委托
使用事件委托的原因：
（1）每个函数都是对象，都会占用内存空间，对象越多，性能越差
（2）为指定事件处理程序所需访问DOM的次数会先期造成整个页面交互的延迟
事件委托：当事件触发时，把要做的事委托给父元素(或父元素的子元素)来处理。
也就是利用冒泡的原理，把事件加到父级上，通过判断事件来源的子集，执行相应的操作。
使用事件委托技术能让你避免对特定的每个节点添加事件监听器。
Go somewhere
Do something
Say hi
4.1事件委托的优点
(1)document 对象随时可用，任何时候都可以给它添加事件处理程序（不用等待 DOMContentLoaded或 load 事件）。这意味着只要页面渲染出可点击的元素，就可以无延迟地起作用。
(2)节省花在设置页面事件处理程序上的时间。只指定一个事件处理程序既可以节省 DOM 引用，也可以节省时间。
(3)减少整个页面所需的内存，提升整体性能。最适合使用事件委托的事件包括：click、mousedown、mouseup、keydown 和 keypress。5.事件类型
（1）用户界面事件（UIEvent）：涉及与 BOM 交互的通用浏览器事件。
（2）焦点事件（FocusEvent）：在元素获得和失去焦点时触发。
（3）鼠标事件（MouseEvent）：使用鼠标在页面上执行某些操作时触发。
（4）滚轮事件（WheelEvent）：使用鼠标滚轮（或类似设备）时触发。
（5）键盘事件（KeyboardEvent）：使用键盘在页面上执行某些操作时触发。
（6）输入事件（InputEvent）：向文档中输入文本时触发。5.1 用户界面事件-UIEvent
（1）load
在 window 上当页面加载完成后触发，在窗套（）上当所有窗格（元素上当相应对象加载完成后触发。
（2）unload
当页面完全卸载后在window上触发，当所有框架都卸载后在框架集上触发，当嵌入的内容卸载完毕后在上触发。
（3）select
在文本框（ 5.2 焦点事件-FocusEvent
(1)blur 当元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持。
(2)focus 当元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。
(3)focusin 当元素获得焦点时触发。这个事件是 focus 的冒泡版。
(4)focusout 当元素失去焦点时触发。这个事件是 blur 的冒泡版。5.3 鼠标事件-MouseEvent和鼠标滚轮事件-WheelEvent
(1)click 在用户单击鼠标主键（通常是左键）或按键盘回车键时触发。这主要是基于无障碍的考虑，让键盘和鼠标都可以触发 onclick 事件处理程序。
(2)dblclick 在用户双击鼠标主键（通常是左键）时触发。这个事件不是在 DOM2 Events 中定义的，但得到了很好的支持，DOM3 Events 将其进行了标准化。
(3)mousedown 在用户按下任意鼠标键时触发。这个事件不能通过键盘触发。
(4)mouseenter 在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不冒泡，也不会在光标经过后代元素时触发。mouseenter 事件不是在 DOM2 Events 中定义的，而是 DOM3 Events中新增的事件。
(5)mouseleave 在用户把鼠标光标从元素内部移到元素外部时触发。这个事件不冒泡，也不会在光标经过后代元素时触发。mouseleave 事件不是在 DOM2 Events 中定义的，而是 DOM3 Events中新增的事件。
(6)mousemove 在鼠标光标在元素上移动时反复触发。这个事件不能通过键盘触发。
(7)mouseout 在用户把鼠标光标从一个元素移到另一个元素上时触发。移到的元素可以是原始元素的外部元素，也可以是原始元素的子元素。这个事件不能通过键盘触发。
(8)mouseover 在用户把鼠标光标从元素外部移到元素内部时触发。这个事件不能通过键盘触发。
(9)mouseup 在用户释放鼠标键时触发。这个事件不能通过键盘触发。
(10)mousewheel 鼠标滚轮事件5.4 键盘事件-KeyboardEvent与输入事件-InputEvent
(1)keydown，用户按下键盘上某个键时触发，而且持续按住会重复触发。
(2)keypress，用户按下键盘上某个键并产生字符时触发，而且持续按住会重复触发。Esc 键也会触发这个事件。DOM3 Events 废弃了 keypress 事件，而推荐 textInput 事件。
(3)keyup，用户释放键盘上某个键时触发
