深入理解 addEventListener

语法一： target.addEventListener(type, listener, useCapture)

参数一：事件类型，比如 click、mouseenter、drag等。

参数二：事件被触发时的回调函数。

参数三：useCapture: 默认值为false，表示在冒泡阶段处理事件。 如果为true，则在捕获阶段处理事件。

语法二：target.addEventListener(type, listener, options)

options对象：

useCapture: 默认值为false，事件将在冒泡阶段触发。 如果为true，事件将在捕获阶段触发。

once: 表示 listener 在添加之后是否最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。

passive: 设置为 true 时，表示 listener 永远不会调用 preventDefault()。使用 passive 可改善的滚屏性能。（根据标准，passive的值默认为false，最新的chrome和firefox已经默认将passive设置为true。）

为什么会有 passive 的出现？？-- addEventListener使用 passive 可改善的滚屏性能

移动端的一些事件比如 touchstart 、 touchmove 、 touchend 、 touchcancel 等，如果在这些事件中阻止默认行为，页面会被禁止滚动或缩放。

而浏览器无法事先知道一个监听器是否会禁止默认行为，要等监听器执行之后，才会去执行默认行为。而监听器的执行是要耗时的，如果在 event.preventDefault() 之前耗时了 2秒 ，这样就会导致页面卡顿。

为了提升此种场景下的滚动体验，我们需要有一个参数来告诉浏览器，我的事件监听器中不会有 event.preventDefault() ，你可以不用等监听器执行完毕，请尽情的滚动吧。所以有了 passive 属性。为了兼容之前的 useCapture ，把最后一个参数改成了一个对象 options。

所以在绑定移动端相关的 touch 和滚动事件时，尽可能使用 { passive: true } 来提升性能和体验，避免出现页面卡顿。

然而，不是所有的浏览器都支持 passive 特性，不支持 passive 特性的浏览器会把最后一个参数当作 useCapture ，所以需要这段精妙的代码判断是否支持 passive 特性：

// Test via a getter in the options object to see 
// if the passive property is accessed
var supportsPassive = false;
try {
  var opts = Object.defineProperty({}, 'passive', {
    get: function() {
      supportsPassive = true;
    }
  });
  window.addEventListener("test", null, opts);
} catch (e) {}


// Use our detect's results. 
// passive applied if supported, capture will be false either way.
elem.addEventListener(
  'touchstart',
  fn,
  supportsPassive ? { passive: true } : false
);

通过 Object.defineProperty 设置一个 passive 的 get 访问器，添加一个 test 的事件，当浏览器支持的时候会调用 get 访问器，在 get 访问器中设置 supportsPassive。

在Angular框架中，Angular CDK 早已在 @angular/cdk/platform 模块提供了normalizePassiveListenerOptions({passive: true}) 供我们解决兼容性的问题，核心代码如下：

/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */

/** Cached result of whether the user's browser supports passive event listeners. */
let supportsPassiveEvents: boolean;

/**
 * Checks whether the user's browser supports passive event listeners.
 * See: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
 */
export function supportsPassiveEventListeners(): boolean {
  if (supportsPassiveEvents == null && typeof window !== 'undefined') {
    try {
      window.addEventListener(
        'test',
        null!,
        Object.defineProperty({}, 'passive', {
          get: () => (supportsPassiveEvents = true),
        }),
      );
   } finally {
      supportsPassiveEvents = supportsPassiveEvents || false;
    }
  }

  return supportsPassiveEvents;
}

/**
 * Normalizes an `AddEventListener` object to something that can be passed
 * to `addEventListener` on any browser, no matter whether it supports the
 * `options` parameter.
 * @param options Object to be normalized.
 */
export function normalizePassiveListenerOptions(
  options: AddEventListenerOptions,
): AddEventListenerOptions | boolean {
  return supportsPassiveEventListeners() ? options : !!options.capture;
}

添加绑定事件支持 passive 参数的相关Issue：https://github.com/angular/angular/issues/8866