摘要：事件流事件流是描述对页面接受事件的顺序，和提出了完全相反的事件流模型，描述的是从页面中接收事件的顺序也可理解为事件在页面中传播的顺序。
事件流
事件流是描述对页面接受事件的顺序，IE和Netscape提出了完全相反的事件流模型，描述的是从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序。
我们通过平常使用知道addEventListener最后的参数是切换句柄的，当这个布尔值为true时，表示在捕获阶段调用事件处理程序；若果是false，表示在冒泡阶段调用事件处理程序。
为什么要使用 addEventListener?MDN：useCapture 可选（）
Boolean，是指在DOM树中，注册了该listener的元素，是否会先于它下方的任何事件目标，接收到该事件。沿着DOM树向上冒泡的事件不会触发被指定为use capture（也就是设为true）的listener。当一个元素嵌套了另一个元素，两个元素都对同一个事件注册了一个处理函数时，所发生的事件冒泡和事件捕获是两种不同的事件传播方式。事件传播模式决定了元素以哪个顺序接收事件。Once the propagation path has been determined, the event object passes through one or more event phases. There are three event phases: capture phase, target phase and bubble phase. Event objects complete these phases as described below. A phase will be skipped if it is not supported, or if the event object’s propagation has been stopped. For example, if the bubbles attribute is set to false, the bubble phase will be skipped, and if stopPropagation() has been called prior to the dispatch, all phases will be skipped.
The capture phase: The event object propagates through the target’s ancestors from the Window to the target’s parent. This phase is also known as the capturing phase.
The target phase: The event object arrives at the event object’s event target. This phase is also known as the at-target phase. If the event type indicates that the event doesn’t bubble, then the event object will halt after completion of this phase.
The bubble phase: The event object propagates through the target’s ancestors in reverse order, starting with the target’s parent and ending with the Window. This phase is also known as the bubbling phase.
addEventListener 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括：
它允许给一个事件注册多个 listener。当存在其他的库时，使用 DHTML 库或者 Mozilla extensions 不会出现问题。
它提供了一种更精细的手段控制 listener 的触发阶段。（即可以选择捕获或者冒泡）。
它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。
事件冒泡IE的事件流叫事件冒泡，逐级向上传播
点击div之后，顺序是div -> body -> html
事件捕获Netscape事件捕获是与冒泡相反的
DOM事件流DOM规定的事件流包括三个阶段
捕获阶段
目标阶段
冒泡阶段
事件捕获阶段，为截获事件提供机会，然后是实际的目标接受事件，最后是事件冒泡阶段
事件的作用范围Document
事件的作用范围为:
元素自己所占页面空间部分加嵌套元素所占空间范围(若嵌套元素覆盖在容器元素上，则事件的作用范围为容器元素自身所占空间大小)
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/84731.html
摘要：忍者级别的函数操作对于什么是匿名函数，这里就不做过多介绍了。我们需要知道的是，对于而言，匿名函数是一个很重要且具有逻辑性的特性。通常，匿名函数的使用情况是创建一个供以后使用的函数。 JS 中的递归 递归, 递归基础, 斐波那契数列, 使用递归方式深拷贝, 自定义事件添加 这一次，彻底弄懂 JavaScript 执行机制 本文的目的就是要保证你彻底弄懂javascript的执行机制，如果...
摘要：是事件驱动的，只根据用户的操作做出相应的反应处理。中的数据要求带有明确的类型，不要求。这些小小的变化可能会产生严重的意想不到的后果，因此有必要撤销这些变化。的优势相比于，也有一些明显优势。因此在应对大型开发项目时，使用更加合适。 showImg(https://segmentfault.com/img/bV1Dx7?w=740&h=322); TypeScript 和 JavaScri...
摘要：雅虎从很早就开始招聘和培养研究型人才，雅虎研究院就是在这个过程中应运而生的。今天我就来说一说雅虎研究院的历史，以及过去十多年间取得的成就，聊一聊如何通过引进高级人才，迅速构建起一支世界级的研发团队。 showImg(https://segmentfault.com/img/remote/1460000013995512); 作者：王下邀月熊 编辑：徐川 前端每周清单专注大前端领域内容，...
摘要：的翻译文档由的维护很多人说，阮老师已经有一本关于的书了入门，觉得看看这本书就足够了。前端的异步解决方案之和异步编程模式在前端开发过程中，显得越来越重要。为了让编程更美好，我们就需要引入来降低异步编程的复杂性。 JavaScript Promise 迷你书（中文版） 超详细介绍promise的gitbook，看完再不会promise...... 本书的目的是以目前还在制定中的ECMASc...
摘要：而改变了这种状态，虽然定义的类用运算符得到的仍然是，但它不能像普通函数一样直接调用同时，中定义的方法函数，也不能当作构造函数用来调用。而在中，用调用一个构造函数，会创建一个新对象，而其中的就指向这个新对象。 JavaScript 中的 this 指向问题有很多博客在解释，仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题，所以我不得不将关于前端构建技术的交流会延长了半个时候讨论 ...
阅读 2906·2021-10-19 10:09
阅读 3125·2021-10-09 09:41
阅读 3370·2021-09-26 09:47
阅读 2687·2019-08-30 15:56
阅读 590·2019-08-29 17:04
阅读 979·2019-08-26 11:58
阅读 2504·2019-08-26 11:51
阅读 3352·2019-08-26 11:29
