js事件

参考链接：

1.参考链接1

javaScript 与 HTML 之间的交互是通过事件实现的

事件流：事件流描述的是从页面中接收事件的顺序

事件冒泡：事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点

任何可以冒泡的事件都不仅仅可以在事件目标上进行处理，目标的任何祖先节点上也能处理。

运用：事件委托

事件委托原理：

以将事件处理程序附加到更高层的地方负责多个目标的事件处理。

大多数 Web 应用在用户交互上大量用到事件处理程序。页面上的事件处理程序的数量和页面响应 用户交互的速度之间有个负相关。为了减轻这种惩罚，最好使用事件代理。

事件委托实例：

场景1：需要在点击列表项的时候响应一个事件。如果给每个列表项一一都绑定一个函数，那对于内存消耗是非常大的，效率上需要消耗很多性能。因此，比较好的方法就是把这个点击事件绑定到他的父层，也就是 ul 上，然后在执行事件的时候再去匹配判断目标元素；

场景2：动态添加新的Li元素。在很多时候，我们需要通过 AJAX 或者用户操作动态的增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件。如果用了事件委托就没有这种麻烦了，因为事件是绑定在父层的，和目标元素的增减是没有关系的，执行到目标元素是在真正响应执行事件函数的过程中去匹配的；

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。

有些业务场景需要阻止冒泡事件的冒泡，比如在一个HTML结构中,父级包含着子级,当事件在子级发生时(click,mouseenter,mouseleave等)，由于事件冒泡就会触发父级的同名事件。示例：

阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据，这种行为无须我们写程序定制。

应用

事件代理，事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件

让不同的对象同时捕获同一事件，并调用自己的专属处理程序做自己的事情，就像老板一下命令，各自员工做自己岗位上的工作去了。

---

事件捕获：事件捕获的思想 是不太具体的节点应该更早接收到事件，而最具体的节点应该最后接收到事件。事件捕获的用意在于在 事件到达预定目标之前捕获它。

DOM事件流：

“DOM2级事件”规定的事件流包括三个阶段：：事件捕获阶段、处于目标阶段和事件冒泡阶段。

首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶 段，可以在这个阶段对事件做出响应。

在 DOM 事件流中，实际的目标（

元素）在捕获阶段不会接收到事件。这意味着在捕获阶段， 事件从 document 到再到后就停止了。下一个阶段是“处于目标”阶段，于是事件在

上发生，并在事件处理（后面将会讨论这个概念）中被看成冒泡阶段的一部分。然后，冒泡阶段发生， 事件又传播回文档。